大家好，我有一个黑色图像，当用户将鼠标悬停在它上面时，我希望出现一个白色图像，但出于某种原因，每次我将鼠标悬停在黑色图像上时，什么都没有出现
HTML:
<div class="col-xs-12 col-sm-6 col-md-3" align="center" class ="profile-image">
<img alt="my image" class="img-about" src="Images/s4.fw.png">
<span class="overlay"></span>
<h2>Yoga</h2>
</div>
CSS:
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('Images/s4h.fw.png') no-repeat;
cursor: pointer;
}
谢谢
最佳答案
也许您可以使用此代码作为替代品？它更简单..只需使用背景图像而不是颜色..
<!DOCTYPE html>
<html>
<head>
<style>
.col{
margin:auto;
height:200px;
width:200px;
background-color:blue;
}
.col:hover{
background-color:yellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="col" align="center" >
<h2>Yoga</h2>
</div>
</body>
</html
关于html - 将鼠标悬停在图像上以显示另一个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45537796/