我目前在导航栏上有图像链接,以及当您将鼠标悬停在链接上时的其他图像。我想知道设置它的最佳方法,以便用户所在的当前页面显示第三张图像。
例如,用户在index.html上,在导航栏上是Home,所以我希望Home与图像不同,联系等等。这是我当前的HTML和CSS。
<ul id="navbar">
<li id="bf"><a class="button" href="index.html">Home</a></li>
<li id="bf"><a class="button" href="about.html">About Us</a></li>
<li id="bf"><a class="button" href="contact.html">Contact</a></li>
<li id="bf"><a class="button" href="images.html">Images</a></li>
</ul>
#navbar {
left:50%;
margin-left:325px;
top:50%;
margin-top:-100px;
}
#bf {
display:inline;
}
a.button {
display: -moz-inline-stack;
display: inline-block;
width: 147px;
height: 49px;
background: url("/images/btn.png") no-repeat;
line-height: 43px;
vertical-align: text-middle;
text-align: center;
color: #180a6b;
font-family: Verdana;
font-size: 25px;
font-weight: normal;
font-style: normal;
text-shadow: #FFFFFF 1px 1px 0;
text-decoration: none;
}
a.button:hover {
background: url("/images/hovbtn.png") no-repeat;
color: #8d8fc2;
}
答案 0 :(得分:1)
只需将一个活动类添加到列表项/链接,然后设置样式。你可以像这样使用它:
<ul id="navbar">
<li id="bf"><a class="button active" href="index.html">Home</a></li>
<li id="bf"><a class="button" href="about.html">About Us</a></li>
<li id="bf"><a class="button" href="contact.html">Contact</a></li>
<li id="bf"><a class="button" href="images.html">Images</a></li>
</ul>
然后设置样式
#navbar li a:hover{
background:red;
}
#navbar li a.active {
background:yellow;
}