我想要实现的是将鼠标悬停在图像上,在图像上显示悬停 div;我创建了这个 JsFiddle但我不完全知道如何实现我想要做的事情。
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
}
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div class="hover"></div>
最佳答案
<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>
.img:hover #hover{
display:block;
}
#hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
position:absolute;
left:0;
top:0;
display:none;
}
工作 fiddle https://jsfiddle.net/kcdued0s/3/
关于javascript - 在图像上悬停显示图像上的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38198122/