css - CSS OnHover 文本，应该显示图像

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

现场演示

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 属性都可以直接应用于图像，但是使用.show()jQuery 显示该图像，你不能在 CSS 中这样做。