Question

所以我想要发生的是当前链接的背景（您当前所在页面的链接）转换为单独的颜色以及字体颜色更改为白色。我也希望在a：hover（对于你悬停的链接）上发生同样的效果。我已经非常接近这个效果，但是我的一个问题是改变a的字体颜色：鼠标需要直接在链接上而不是简单地在其容器内。我理解为什么这不起作用，因为我特意将这个属性赋予链接而不是列表，但是如果我用#nav li放置它们，“a”的字体颜色变化不起作用。我想要的效果类似于此页面上的NavBar http://www.vitalsmarts.com/ CSS / HTML：

<style>

#nav{
    list-style-type:none;
    text-align:center;
    height:50px;
    background-image:url("image/menuBg.png");
}

#nav li {
    float:left;
    width:155px;    
}


#nav li a {
    text-decoration:none;
    font-size:1.3em;
    color:#000000;
}

 #nav li:hover {
    background-color:#143D17;
     color:#FFFFFF;
}

 #nav li a:hover {
      color:#FFFFFF;
 }

#nav li a.currentFont {
    color:#FFFFFF;
}

 .navPadS {
     padding:13px 0px;
}

 .navPadL {
     padding:13px 12px;
 }

.navPadLL {
     padding-top:13px;
     padding-bottom:13px;
     padding-right:20px;
 }

.current {
    background-color:#143D17;
 }

</style>


<body>

<!Header and NavBar>

<div id="navCont">
        <ul id="nav" class"tbBord">
            <li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
            <li class="navPadLL"><a href="index.html">home</a></li>
            <li class="navPadL"><a href="#">home</a></li>
            <li class="navPadS"><a href="#">home</a></li>
            <li class="navPadS"><a href="#">home</a></li>
            <li class="navPadS"><a href="#">home</a></li>
        </ul>
    </div>

</body>
</html>

Answer 1

将此添加到您的css

#nav li a {
    text-decoration:none;
    font-size:1.3em;
    color:#000000;
    display:block;
}

Answer 2

不要将李的样式只是将它们向左漂浮并将所有样式放在a中。我创建了this example on JS Bin，但重要的是：

#nav li {
    margin:0;
    padding:0;  
    float:left;
}
#nav li a {
   text-decoration:none;
   font-size:1.3em;
   color:#000000;
   width:155px;
   display:block;
   padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
    background-color:#143D17;
    color:#FFFFFF;
}

NavBar悬停和当前效果

2 个答案: