[分享]css3悬浮换背景

CSS3悬浮换背景是一种常用的网页效果，它可以在鼠标悬浮于某个元素上时，动态地改变该元素的背景颜色或图片，从而使网页具有更加生动活泼的感觉。/ HTML部分 / 请将鼠标悬浮于此！ / CSS部分...

CSS3悬浮换背景是一种常用的网页效果，它可以在鼠标悬浮于某个元素上时，动态地改变该元素的背景颜色或图片，从而使网页具有更加生动活泼的感觉。

/* HTML部分 */
<div class="box">
  <p>请将鼠标悬浮于此！</p>
</div>

/* CSS部分 */
.box {
  width: 200px;
  height: 150px;
  background-image: url("image1.jpg");
  transition: background-image 0.5s ease;
}
.box:hover {
  background-image: url("image2.jpg");
} 

上述代码演示了一个简单的悬浮换背景效果，当鼠标悬浮于类名为“box”的div元素上时，背景图片从image1.jpg转换为image2.jpg，用到了CSS的:hover伪类和transition属性。

此外，还可以通过设置background-color属性来改变背景颜色，或者通过利用伪元素:before或:after来实现更加炫酷的效果。例如，可以设置:before元素的背景颜色，并将后代元素的透明度降低，从而在鼠标悬浮时显示不同的背景颜色。

/* CSS部分 */
.box:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
  transition: background-color 0.5s ease;
}
.box:hover:before {
  background-color: rgba(0, 0, 0, 0.2);
}
.box p {
  position: relative;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.box:hover p {
  opacity: 0.5;
} 

这段代码实现了一个将背景颜色渐变的效果，利用了CSS3的rgba颜色属性和:after伪元素，同时也加入了opacity属性实现字体透明度的变化。

以此类推，CSS3悬浮换背景的效果可以随意发挥，像上述这类常见的用法只是众多种效果中的冰山一角。