所以我想要发生的是当前链接的背景(您当前所在页面的链接)变成单独的颜色,并且字体颜色也变为白色。我也希望在 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>