要实现鼠标放上去，背景和图片都会变化，最简单的方法是使用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属性（重新安排图片布局）等概念。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：div+css实现鼠标放上去，背景跟图片都会变化。 - Python技术站
微信扫一扫 
支付宝扫一扫 