Question

大家好，所以我有一个黑色的图像，当用户将鼠标悬停在它上面时，我希望显示一个白色图像，但出于某种原因，每次我将鼠标悬停在我的黑色图像上时都没有出现

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;
}

由于

Answer 1

也许您可以使用此代码作为替代品？它更简单..只使用背景图像而不是颜色..

<!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

Answer 2

您正在将img标记与背景图像组合在一起。尝试使用两个背景图像 - 在常规HTML元素和同一元素的悬停规则中。

Answer 3

使用jQuery，您可以执行以下操作：

$(".classToHover").mouseenter( function() {
    $(".imageToShow").show();
});

Answer 4

首先，你在html中有重复的“class”，删除其中一个并将它们放在一个中。接下来，你已经有了一个用于个人资料图片的div标签，我认为你里面不需要img标签，只需要为它指定一个背景图像，当你将鼠标悬停在它上面并完成后，它就是另一个。

.profile-image {
   background-image: url('https://www.ledr.com/colours/black.jpg');
   height: 70px;
   width: 120px;
}

.profile-image:hover {
   background-image: url('https://www.ledr.com/colours/white.jpg');
   cursor: pointer;
}

<div class="col-xs-12 col-sm-6 col-md-3 profile-image" align="center">
    <span class="overlay"></span>
    <h2>Yoga</h2>
</div>

如果您只想要黑白，为什么不使用背景色？

.profile-image {
   background-color: black;
   height: 70px;
   width: 120px;
}

.profile-image:hover {
   background-color: white;
   cursor: pointer;
}

<div class="col-xs-12 col-sm-6 col-md-3 profile-image" align="center">
    <span class="overlay"></span>
    <h2>Yoga</h2>
</div>

将鼠标悬停在图像上以显示另一个图像

4 个答案: