:悬停不工作
问题描述:
<nav>
<div class="container">
<div class="row-fluid center">
<div id="navcontainerimg" class="span12 center">
<img src="img/hs-header.png"/>
</div>
<div id="navcontainernav" class="span12 center">
<span class="topleft">Our Story</span>
<span class="topright">Awesome Support!</span>
<span class="bottomleft">Read the Blog!</span>
<span class="bottomright">Join Now</span>
</div>
</div>
</div>
的类可以不设置样式:在应用到我的风格悬停不工作徘徊,但他补充说,当它什么都不做。如果我点击:chrome悬停式显示,它会显示在那里,但不起作用。
答
这是因为你已经设置了负z-index
的容器因此Chrome基本上不会承认悬停事件。
将其更改为:
#navcontainernav
{
width: 720px;
margin-left: 40px;
height: 170px;
top: -233px;
border-radius: 8px;
position: relative;
z-index: 1;
}
或任何其他正值。
答
上#navcontainernav z索引变化:-5;到z-index:1;
适用于所有浏览器
+0
这并不提供答案的问题。要批评或要求作者澄清,请在其帖子下方留言。 – 2013-02-23 11:08:54
+0
抱歉..不明白你的答案..问题是悬停!这将通过改变Z指数来工作 – bernte 2013-02-23 11:15:39
爱你。谢谢! – 2013-02-23 16:17:45
汤姆,这工作,但现在它创造了另一个问题。我简化了小提琴,但是在这四个角落之间存在一个图像。我通过使用z-index> 0来使悬停工作,但如果我将图像放在上面,它仍然不起作用。有没有办法做到这一点,而不是把图像分成两部分(我想像一个矩形与分开的圆圈可能工作),但我宁愿在CSS中做。 http://healthysurprise.com/so – 2013-02-23 16:33:12
嗯,这是一个艰难的一个,怎么样使之包含正确的剪辑(比如http://cl.ly/N7pB - 其中红色边框表示图像)改变你的形象,然后带来的nav的'z-index'高于它? – 2013-02-23 17:10:29