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”文本 - ＆gt;不像现在那样拆分现有段落。（所以应该只有一个段落以 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

你是否正在使用一些花哨的textarea来粘贴代码？当我查看页面源时，在</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标签。

CSS：将鼠标悬停在<p> </p>中的文本上显示图片

1 个答案: