一、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 样式不会生效，这可能是由于以下原因：

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

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

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

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

正确的结构应该是：

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

三、CSS :hover 特效

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

手写字体效果：

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;
}

环形进度条：

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 非常灵活，可以用于任何元素，例如下面的一些例子：

改变链接的颜色：

a:hover {
  color: #1abc9c;
}

滑动看到隐藏的元素：

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

改变按钮的形状：

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，我们可以为网站增加更多交互性和用户体验。

CSS :hover 样式详解