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

Posted 2023-03-06

【中文标题】CSS HTML链接图像悬停更改段落格式

【英文标题】：CSS HTML Link Image Hover changing paragraph format

【发布时间】：2016-10-21 00:08:29

【问题描述】：

我对 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" /></span></a>
</div>
<div class="hover_img"><a href="#">2<span><img src="2.jpg" />
</span></a>      


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

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

"1
2
and a
3"

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

任何帮助将不胜感激:)

【问题讨论】：

你不能把 div 放在一个段落中……这是无效的 HTML。

默认情况下div也是块元素。

你有没有试过把它们全部放在一个 div 中，并将 div 的样式设置为浮动：left;

感谢大家的帮助，答案是使用 spans 而不是 div...我不知道 div 是无效的 HTML，所以我很感激帮助 :) 我很新；）

如果您能接受一个可以解决您的问题的答案（如果有的话），或者让我们知道缺少什么，那就太好了，这样我们就能找到一个可以解决的问题

【参考方案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" /></span></span>, 
  <span class="hover_img">2<span><img src="http://www.fillmurray.com/16/16" /></span></span> and a
  <span class="hover_img">3<span><img src="http://www.fillmurray.com/16/16" /></span></span>
</p>

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

【讨论】：

感谢您的帮助，谢谢 :) 我显然需要阅读 div 和 span ：D

【参考方案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" /></span></a> 
 
  <a href="#">2<span><img src="2.jpg" /></span></a>    
and a 
 
<a href="#">3<span><img src="3.jpg" /></span></a>
 

【讨论】：

感谢您的帮助，它反映了此处的其他建议 :)