使用css样式设置鼠标移入图片使其透明并在上面显示另一张图片

最新推荐文章于 2022-08-23 16:22:00 发布

风动狂野

最新推荐文章于 2022-08-23 16:22:00 发布

阅读量3.2k

点赞数 6

本文链接：https://blog.csdn.net/weixin_43502084/article/details/83789453

版权

要点：
1.图片2要使用绝对定位（position:absolute)和样式要设置display：none
2.鼠标移动到box1中改变图片样式（#box1：hover #img)

<!Doctype html>
<html>
<head>
<style>
#box{
width:200px;  
height:200px;
}
#img1{
width:200px;
height:200px;
}
#img2{
position:absolute; //设置图片2为绝对定位
display:none;    //设置这张图片不显示
width:100px;
height:100px;
top:50px;
left:50px;
}
#box1:hover #img1{ 
opacity:.3;   //鼠标移到box1上，图片1透明度改变
}
#box1:hover #img2{
display:block;   //鼠标移到box1上，图片2显示
}
</style>
</head>
<body>
<div id="box1">
<img id="img1" src="images/img1">
<img id="img2" src="images/img2">
</div>
</body>
</html>