为什么使用类选择器的CSS悬停效果不适用于嵌套布局?

时间:2014-11-19 09:33:12

标签: css

简单代码。jsfiddle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>

        <div class="header">
            <div class="nav">
                <div class="navTitle">1</div>
                <div class="subNav subNav1">test1</div>
                <div class="subNav subNav2">test2</div>
                <div class="subNav subNav3">test3</div>
                <div class="subNav subNav4">test4</div>
            </div>

        </div>

        <div class="container">

        </div>

        <div class="left">
            <div class="leftEles leftEle1"></div>
            <div class="leftEles leftEle2"></div>
            <div class="leftEles leftEle3"></div>
            <div class="leftEles leftEle4"></div>
            <div class="leftEles leftEle5"></div>
        </div>

        <div class="footer">

        </div>




        <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

和CSS。

body{
    overflow: hidden;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

.header{
    width: 100%;
    height: 50px;
    background-color: #0092C7;
    position: relative;
}

.left{
    position: absolute;
    left: 0;
    top: 50px;
    width: 200px;
    bottom: 0;
    border-right: 1px solid #C0C0C0;
}

.container{
    position: absolute;
    left: 200px;
    top: 50px;
    bottom: 0;
    right: 0;
}

.leftEles{
    width: 100%;
    height: 50px;
    background-color: #F4F3DE;
    border-bottom: 1px solid #C0C0C0;
    cursor: pointer;
}

.leftEles:hover{
    opacity: 0.7;
}

.nav{
    width: 200px;
    height: 250px;
    line-height: 50px;
    float: right;
    text-align: center;
}

.navTitle{
    border-left: 1px solid #C0C0C0;
}

.subNav{
    border-bottom: 1px solid #C0C0C0;
    background-color: rgba(0,146,199,0.7);
    cursor: pointer;
}

.subNav:hover{
    color: #FFFFFF;
}

我很好奇为什么.subNav上的悬停和光标效果不起作用!
简单而愚蠢的问题。帮助我,很多thx!

2 个答案:

答案 0 :(得分:2)

由于.container重叠.header

,您的效果无效

.header上使用z-index css:

z-index: 2;

完成.header

的css
.header{
    width: 100%;
    height: 50px;
    z-index:2;
    background-color: #0092C7;
    position: relative;
}

UPDATED DEMO

答案 1 :(得分:2)

.container位于导航上方,具有更高的自然z-index(在导航后的代码中)。

要在容器上方放置导航,请设置为导航position: relative(仅定位元素(不包括position: static;)与z-index一起使用)和z-index高于1。

.nav{
    width: 200px;
    height: 250px;
    line-height: 50px;
    float: right;
    text-align: center;
    position: relative;
    z-index: 2
}

http://jsfiddle.net/4b2d0fyv/3/