悬停效果 CSS

在网页设计中，悬停效果是一种常见的互动方式，它可以增加用户的参与度，提升网站的交互性。在本文中，我们将介绍一些常见的悬停效果，以及如何使用 CSS 实现它们。

鼠标悬停改变背景色

此效果简单易用，只需要设置 hover 伪类即可。

.button:hover {
  background-color: #007bff;
}

在这个例子中，我们设置了一个按钮，当鼠标悬停在按钮上时，按钮的背景颜色就会改变为蓝色。

鼠标悬停显示隐藏元素

这个效果可以让用户在鼠标悬停时看到一些隐藏的内容。

<div class="box">
  <div class="hidden">显示内容</div>
  <div class="visible">隐藏内容</div>
</div>

.box .hidden {
  display: none;
}

.box:hover .hidden {
  display: block;
}

在这个例子中，我们设置了一个包含两个 div 元素的容器，其中一个是隐藏的，另一个是可见的。当鼠标悬停在容器上时，隐藏元素就会显示出来。

鼠标悬停放大图片

这个效果可以让用户在鼠标悬停时看到放大的图片。

<div class="image">
  <img src="image.jpg" alt="图片">
</div>

.image {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transition: all 0.3s ease-out;
}

.image:hover img {
  transform: scale(1.2);
}

在这个例子中，我们设置了一个容器和一个图片。容器使用了 overflow: hidden 属性来隐藏图片的溢出部分。当鼠标悬停在容器上时，图片就会放大 1.2 倍。

鼠标悬停动画效果

这个效果可以让用户在鼠标悬停时看到动画效果。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: all 0.3s ease-out;
}

.box:hover {
  transform: rotate(45deg);
}

在这个例子中，我们设置了一个小方块。当鼠标悬停在方块上时，方块就会旋转 45 度。

总结

以上这些悬停效果只是冰山一角，CSS 还有很多悬停效果可以实现。通过掌握这些基本的悬停效果，你可以灵活运用 CSS，设计出更加丰富、多彩的网站页面。

Markdown 代码片段：

```css
选择器 {
  属性: 值;
}

选择器:hover {
  属性: 值;
}

<div class="box">
  <div class="hidden">显示内容</div>
  <div class="visible">隐藏内容</div>
</div>