[英]Proper way of styling links on other page
我的主導航欄是這樣的: 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>
其css如下:
#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);
}
現在,我在聯系人頁面上有我的圖標圖像,該圖像鏈接到Facebook,Twitter等上的用戶個人資料,但是當它們處於活動狀態(如導航欄)時,它們具有相同的背景。 我該如何改變?
我認為您的問題出在您定義CSS的方式中: #navbar a:hover, a:active
應該是#navbar a:hover, #navbar a:active
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.