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

此代码工作正常，做我想要的。问题是链接在我的段落中通常不会出现。我想说＆＃34; 1 2和3＆＃34;但相反它是

"1
2
and a
3"

我已经搞砸了定位，尝试添加各种格式，似乎没什么用。样式表的段落格式在其他地方处理，它现在使用wordpress模板。

任何帮助将不胜感激：）

Answer 1

这里有几点需要解决。

问题是链接在我的段落
中通常不会出现

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

其次，锚标签应该去某个地方。如果没有，请不要使用锚标记...而是使用跨度。

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

.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样式，你可以在这里阅读更多关于内联vs块元素的内容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>

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

2 个答案: