CSS :hover 样式详解

一、CSS :hover 动画效果

CSS :hover 伪类是所有CSS伪类中最常用的一个，它可以让元素在鼠标悬停时改变其样式。通过结合其他CSS属性和关键帧动画，可以创建出许多有趣的触发动画效果。

例如：当鼠标悬停在一个按钮上时，可以使按钮背景色渐变或者添加动态阴影效果。下面是一个样例：

.btn {
   padding: 10px 20px;
   border: none;
   background: linear-gradient(to bottom, white, #EEEEEE);
   cursor: pointer;
   animation: btnAnim 0.3s ease-in-out forwards;
}
 
.btn:hover {
   background: linear-gradient(to bottom, #EEEEEE, white);
   animation: none;
}
 
@keyframes btnAnim {
   from {
      box-shadow: none;
   }
   to {
      box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
   }
}

二、CSS :hover 不生效

有时候，CSS :hover 样式不会生效，这可能是由于以下原因：

1、CSS样式权重不正确。当存在相同的样式时，应该使用更具体的选择器以确保 :hover 触发样式。例如：

button.btn:hover {
   background: #333;
}

2、HTML结构错误。如果HTML结构不正确，可能会导致CSS :hover 样式不生效。例如：

<img src="example.png">
<span>Example Text</span>

正确的结构应该是：

<div>
   <img src="example.png">
   <span>Example Text</span>
</div>

三、CSS :hover 特效

CSS :hover 特效可以让网站更加引人注目，提高用户体验。这里，我们介绍两个非常流行的特效：

1、手写字体效果：

body {
   background: #000;
}
 
h1 {
   color: white;
   font-family: Arial;
   font-size: 64px;
   text-transform: uppercase;
   letter-spacing: 3px;
   position: relative;
}
 
h1:after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   padding: 5px;
   color: #1abc9c;
   background: #34495e;
   overflow: hidden;
   z-index: -1;
   transition: all 0.5s ease;
}
 
h1:hover:after {
   width: 100%;
   color: #fff;
}

2、环形进度条：

div {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: #EEE;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
 
div:before,
div:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 4px solid transparent;
   border-top-color: #1abc9c;
}
 
div:before {
   animation: spin 2s linear infinite;
}
 
div:after {
   animation: progress 5s linear infinite;
   border-width: 6px;
   transform: rotate(120deg);
   animation-delay: -2s;
}
 
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
 
@keyframes progress {
   0% {
      transform: rotate(-120deg);
   }
   100% {
      transform: rotate(240deg);
   }
}

四、CSS :hover 图片放大

CSS :hover 可以用来创建图片悬停放大的效果。下面是一段实现代码：

img:hover {
   transform: scale(1.2);
   transition: all 0.5s ease;
}

五、CSS :hover 移出动画

移出动画可以在鼠标离开元素时添加过渡效果。下面是一个移出旋转动画的例子：

div {
   width: 100px;
   height: 100px;
   background: #1abc9c;
   transition: all 0.5s ease;
}
 
div:hover {
   transform: rotate(180deg);
}
 
div:hover:before {
   opacity: 1;
   transform: rotate(180deg);
}
 
div:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: #34495e;
   opacity: 0;
   transition: all 0.5s ease;
}

六、CSS :hover 用法

CSS :hover 非常灵活，可以用于任何元素，例如下面的一些例子：

1、改变链接的颜色：

a:hover {
   color: #1abc9c;
}

2、滑动看到隐藏的元素：

div.hidden {
   height: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 0.5s ease;
}
 
div:hover .hidden {
   height: auto;
   opacity: 1;
}

3、改变按钮的形状：

button {
   padding: 10px 20px;
   border: none;
   border-radius: 20px;
   background: #1abc9c;
   color: white;
   transition: all 0.5s ease;
}
 
button:hover {
   border-radius: 50%;
   background: #2ecc71;
}

七、CSS 行内样式:hover

通过将 :hover 伪类应用于HTML标签的行内样式，可以实现一些快速的效果。例如：

<p style="background: #1abc9c; color: white; padding: 10px;" 
   onMouseOver="this.style.backgroundColor='#2ecc71';" 
   onMouseOut="this.style.backgroundColor='#1abc9c';">
   Hover Me
</p>

八、hover 事件

通过JavaScript，可以在鼠标悬停时触发事件。例如：

const elem = document.querySelector(".box");
 
elem.addEventListener("mouseover", () => {
   elem.style.transform = "scale(1.2)";
});
 
elem.addEventListener("mouseout", () => {
   elem.style.transform = "scale(1)";
});

九、 CSS :hover 理解

CSS :hover 是一种伪类选择器，用于在鼠标悬停时改变元素的外观。它是CSS中最常用的伪类之一，因为它可以轻松地在元素上创建交互式效果。 :hover 可以与其他CSS属性结合使用，例如 transition 和 animation 以创建更复杂的效果。

十、 CSS :hover 控制其他元素

在CSS :hover 中，可以使用相邻兄弟选择器和子元素选择器来控制其他元素的样式。例如：

.btn:hover + .text {
   color: white;
}
 
.btn:hover ~ .text {
   color: #2ecc71;
}

以上就是关于 CSS :hover 的详细解释和用法示例。通过合理地应用 :hover，我们可以为网站增加更多交互性和用户体验。