在其他页面上设置链接样式的正确方法

Question

My main navigation bar is like this: JSFIDDLE

<div id="navbar">

        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="bio.html">Bio</a></li> 
            <li><a href="projects.html">Projects</a></li>
            <li id="active"><a href="contact.html">Contact</a></li>
            <li><a href="friends.html">Friends</a></li>
        </ul>
    </div>

The css for it is as follow:

#navbar {
float: left;
height: 100px;
width: 395px;
background-color: orange;
background-color: #CCCCCC;
background-image: url(../images/1_03.jpg);
}
#navbar ul{
list-style-type: none;
margin-top: 30px;
}
#navbar li{
float: left;
text-align:center; 
width: 60px;
}
#navbar a:link, a:visited {
display: block;
width: 100%;
height: 50px;
font-size: 14px;
color: rgba(141,141,141,1);
text-decoration: none;
padding-top: 20px;
font-family: Raleway, sans-serif;
-moz-transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
font-weight: 500;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
 transition: all 0.3s linear;
 }
#navbar a:hover, a:active {
color:white;
background-color: #ff7200;
}
#active > a {
display: block;
color: white;
background-color: rgba(51,51,51,1);
}

Now I have on contact page my icon images, which links to the user's profile on Facebook, Twitter, etc., but they get the same background when in active state like my navigation bar. How can I change that?

Answer 1

我认为您的问题出在您定义CSS的方式中： #navbar a:hover, a:active应该是#navbar a:hover, #navbar a:active