Question

我希望有一个像“这里”这样的词，当我将鼠标悬停在它上面时，应该会显示一个图像。我找到了很多代码如何在悬停时替换图像或者做其他事情，但我想要这样：在文本上方，背景中的风格不应受到干扰。

Answer 1

<div class="comment">Here
<img class="image" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png">
</div>
.comment .image {
   display: none;   
}  

.comment:hover .image {
   display: block;
}

Live Demo

Answer 2

以下是一个示例，

<div class="here">Here</div>
<img src="link/to/file.png" class="image" alt="photo" style="display: none;" />

jQuery代码是必需的，你不能用CSS做到这一点。

$('.here').hover(function () { // on hover
   $('.image').show(); // show the image..
}

剩下的将使用CSS应用，例如

position: absolute;
top: 0;

所有其他CSS属性都可以直接应用于图像，但是使用jQuery中的.show()显示该图像，你不能在CSS中这样做。

CSS OnHover文本，应显示图像

2 个答案: