:悬停不起作用

时间:2013-02-23 10:12:40

标签: html css styles hover

:当应用于我的样式时,悬停不起作用:

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中的:悬停样式显示,它会在那里显示,但不起作用。

2 个答案:

答案 0 :(得分:10)

这是因为您为容器设置了否定z-index,因此Chrome实际上无法识别悬停事件。

将其更改为:

#navcontainernav    
{
    width: 720px;
    margin-left: 40px;
    height: 170px;
    top: -233px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

或任何其他正值。

答案 1 :(得分:2)

更改#navcontainernav z-index:-5;到z-index:1;

适用于所有浏览器