0

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

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

这是代码：

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

1 回答 1

0

您是否使用一些花哨的文本区域将代码粘贴到其中？当我查看页面源代码时</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 标签。

于 2013-11-05T22:43:10.023 回答