html - CSS:在 <p> 中将鼠标悬停在文本上时显示图片

Question

我需要在我的网站上创建一个功能，当用户将鼠标悬停在链接或某些特定文本上时会显示图片。

我可以用下面的代码在一个问题上重现这种效果。此代码每次都将链接/文本放在新段落中。我需要完全相同的效果，但链接/文本通常显示在同一段落中。

这是代码:

CSS:

.hover_image a{position:relative;}
.hover_image a span{position:absolute; display:none; z-index:99;}
.hover_image a:hover span{display:block;}

HTML:

<p>
bla bla bla
<div class="hover_image">
<a href="#"> link text 
<span><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" />
</span>
</a></div>
bla bla bla
</p>

现场示例: 您现在可以看到它提供的内容:[由于问题已解决而从网络上删除了测试页]

前两个链接没问题(第一个 = 通过 Shadowbox 测试，第二个将下面的代码作为一个单独的段落)但第三个应该与“loren ipsum”文本放在一个段落中 --> 不将现有段落拆分为就是现在。 (因此应该只有一个段落以 Quisque turpis 开头并以 accumsan placerat 结尾)。

我怀疑它与 <span> 有关标签。如果是这样，我应该改用什么？

---

编辑 - 它适用于以下代码(感谢社区):

CSS:

.hover_image {position:relative;}
.hover_image span{position:absolute; display:none; z-index:99;}
.hover_image:hover span{display:block;}

HTML:

<p>
bla bla bla
<a href="#" class="hover_image"> link text 
<span><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
</a>
bla bla bla
</p>

Answer 1

您是否正在使用一些花哨的文本区域将代码粘贴到其中？当我查看页面源代码时，有一个关闭 </p> <div class="hover_image"> 之前的标签所以它实际上是在 HTML 中发送的，并且在解析时不会被浏览器解释。

这是页面源代码中的一些实际 HTML:

elementum a</p><div class="hover_image"><a href="#">nisi <span><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" alt="image" /></span></a></div><p>. Nam nec inte

它在 .hover_image 之前有一个结束 p 标签，在该 div 关闭之后有一个开始 p 标签。