:应用于我的样式时,悬停不起作用:
http://jsfiddle.net/E9DXJ/
<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>
这些类可以在没有:hover的情况下进行样式设置,但是添加时它什么也不做。如果单击chrome中的:悬停样式显示,它将显示在那里,但不起作用。
最佳答案
这是因为您为容器设置了一个负的z-index
,所以chrome基本上不会识别悬停事件。
更改为:
#navcontainernav
{
width: 720px;
margin-left: 40px;
height: 170px;
top: -233px;
border-radius: 8px;
position: relative;
z-index: 1;
}
或任何其他正值。