CSS HTML链接图像悬停更改段落格式

Question

我对 CSS 很陌生，所以这可能是一个简单的解决方法。

将鼠标悬停在链接上时，代码将显示图像。

CSS

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

---

HTML

<div class="hover_img">
<a href="#">1<span><img src="1.jpg" alt="image"/></span></a>
</div>
<div class="hover_img"><a href="#">2<span><img src="2.jpg" alt="image"/>
</span></a>      


</div>
and a 
<div class="hover_img">
<a href="#">3<span><img src="3.jpg" alt="image"/></span></a>
</div>.

这段代码运行良好，可以满足我的要求。问题是链接不会在我的段落中正常显示。我希望它说“1 2 和 3”，但实际上是

"1
2
and a
3"

我弄乱了定位，尝试添加各种格式，但似乎没有任何效果。样式表的段落格式在其他地方处理，现在使用的是 wordpress 模板。

任何帮助将不胜感激:)

Answer 1

这里有几件事要解决。

问题是链接在我的段落中没有正常显示

首先，你不能在段落中使用div，它是无效的HTML，浏览器会自动关闭p标签来解决这个问题。

其次，锚标记应该放在某个地方。如果不是，请不要使用锚标记...改用跨度。

如果我们消除块级的 div 并且 100% 宽，我们可以只使用跨度而不是链接，这也是内联元素，我们得到。

.hover_img {
  position: relative;
}

.hover_img span {
  position: absolute;
  display: none;
  z-index: 99;
  top:-100%;
  left: 0;
}

.hover_img:hover span {
  display: block;
}

<p>
  <span class="hover_img">1<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span>, 
  <span class="hover_img">2<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span> and a
  <span class="hover_img">3<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span>
</p>

您还没有提到图像应该如何定位，所以我假设您希望它们在角色上方，但这是可以调整的。

Answer 2

默认情况下，Div 是块元素，要显示 div 内联，您需要一些 css 样式，您可以在此处阅读更多关于内联与块元素的信息http://www.w3schools.com/html/html_blocks.asp。

在你的情况下，你甚至不需要在 div 中包装标签，这只是更多的代码。

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

 
  <a href="#">1<span><img src="1.jpg" alt="image"/></span></a> 
 
  <a href="#">2<span><img src="2.jpg" alt="image"/></span></a>    
and a 
 
<a href="#">3<span><img src="3.jpg" alt="image"/></span></a>