0

所以我想要发生的是当前链接的背景（您当前所在页面的链接）变成单独的颜色，并且字体颜色也变为白色。我也希望在 a:hover 上发生同样的效果（对于您悬停的链接）。我已经非常接近这种效果，但是我的一个问题是要更改 a:hover 的字体颜色，鼠标需要直接在链接上，而不仅仅是在其容器内。我理解为什么这不起作用，因为我将此属性专门提供给链接而不是列表，但是如果我将它们与#nav li 一起放置，“a”的字体颜色更改将不起作用。我想要的效果类似于此页面上的导航栏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>
4

2 回答 2

1

将此添加到您的CSS

#nav li a {
    text-decoration:none;
    font-size:1.3em;
    color:#000000;
    display:block;
}
于 2013-07-03T20:17:16.720 回答
0

不要为 li 设置样式，只需将它们向左浮动，然后将所有样式都放在 a 中。我在 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;
}
于 2013-07-03T20:33:30.350 回答