div+css实现鼠标放上去，背景跟图片都会变化。

时间：2023-12-14

要实现鼠标放上去，背景和图片都会变化，最简单的方法是使用CSS中的:hover选择器以及background-image和background-color属性。

下面是实现的步骤：

HTML结构中添加一个div：

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

在CSS中设置该div的宽度和高度，并设置一个背景颜色和背景图片，注意背景图片放在背景颜色的后面，否则背景颜色会完全覆盖图片。

.box {
  width: 300px;
  height: 300px;
  background-color: #fff;
  background-image: url('image.jpg');
}

在CSS中添加:hover选择器，当鼠标放在该div上时，设置背景颜色和背景图片为不同的值。

.box:hover {
  background-color: #000;
  background-image: url('image_hover.jpg');
}

这样，当鼠标指针移动到div上时，将会触发:hover选择器，并使背景颜色和背景图片更改为指定的值。

下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Hover Example</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #fff;
      background-image: url('image.jpg');
    }
    .box:hover {
      background-color: #000;
      background-image: url('image_hover.jpg');
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

除了上述方法，还可以使用CSS中的opacity属性来实现鼠标悬停时图片的变化。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Hover Example</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-image: url('image.jpg');
      background-size: cover;
    }
    /* 当鼠标移动到.box中时 */
    .box:hover {
      /* 图片透明度降为0.8 */
      opacity: 0.8;
      /* 对齐和大小保持不变 */
      background-position: unset;
      background-size: unset;
      /* 变更为另一张背景图片 */
      background-image: url('image_hover.jpg');
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

这个方式的优点是易于实现，图片转换流畅；缺点是必须掌握opacity属性（来调整图片的透明度）和background-position属性（重新安排图片布局）等概念。

上一篇：设置背景色解决png图片设置background不显示问题 下一篇：30个开发人员有用的CSS代码片段整理值得借鉴

div+css实现鼠标放上去，背景跟图片都会变化。

相关文章