Question

<style>
img { height: 100px; width: 100px; }
.hover img { display:none; }
.hover:hover img { display:block; }
</style>

<p>other text
</p>
<h1 class="hover">Test 1
<img src="ghost.jpg"/></h1>
<p>other text 
</p>

当我现在悬停时，它移动所有其他文本以显示图像，但我希望图像悬停在文本和页面上的任何其他内容上。不要移动文本为图像腾出空间。我知道如何使用jquery和javascript，但我不知道在这种情况下使用什么。

Answer 1

绝对定位图像，没有任何顶部/底部值：

＆＃13;

img {
    height: 100px;
    width: 100px;
}
.hover img {
    display:none;
    position: absolute;
}
.hover:hover img {
    display:block;
}

＆＃13;

<p>other text</p>
<h1 class="hover">Test 1
    <img src="http://lorempixel.com/100/100" />
</h1>
<p>other text</p>

＆＃13;

Answer 2

以下是你问题的答案。

<style>
img { height: 100px; width: 100px; }
.hover img { display:none; }
.hover:hover img { display:block; }
</style>

<p>other text</p>
<h1 class="hover">Test 1
<img src="ghost.jpg"/></h1>
<p>other text 
</p>

See demo on JSDIDDLE

css悬停文本显示图像

2 个答案: