將鼠標懸停在文本上更改字體顏色

我對css不太瞭解，但是我被卡住了。我想在懸停時將字體的顏色更改爲淡藍色。但是，我希望默認顏色是白色的......我該怎麼做？我所現在，已經改變了默認的文本紫..並強調：S它確實改變字體爲藍色，雖然，在懸停..將鼠標懸停在文本上更改字體顏色

代碼：

CSS：

a:hover 
{ 
    text-decoration:none; 
    color: #B9D3EE; 
} 

.navigationBar 
{ 

    background: gray; 
    height: 50px; 
    width: 100%; 
} 
.menuOption 
{ 
    width:143px; 
    text-align: center; 
    position: static; 
    float:left; 

} 
#search 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: 133px; 
    top: -17px; 
    margin-top: 1px; 
} 
#reports 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: 34px; 
    top: -16px; 
    margin-top: 1px; 
} 
#addProject 
{ 
    position:relative; 
    font-weight: bold; 
    color: #B9D3EE; 
    height: 27px; 
    margin-left: 23px; 
    left: -542px; 
    top: -18px; 
    margin-top: 1px; 
} 
#editProject 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: -611px; 
    top: -18px; 
    margin-top: 1px; 
} 
#more 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: -66px; 
    top: -15px; 
    margin-top: 1px; 
}

HTML：

<div class = "navigationBar"> 

      <asp:ImageButton ID="ImageButton1" runat="server" Height="18px" 
       ImageUrl="~/g.png" style="margin-left: 1012px; margin-top: 18px" 
       Width="23px" /> 

      <div id = "search" class = "menuOption" > 
      <a href=""> Search </a> 
      </div> 

      <div id = "reports" class = "menuOption" > 
      <a href=""> Reports </a> 
      </div> 

      <div id = "more" class = "menuOption" > 
      <a href=""> More... </a> 
      </div> 

      <div id = "addProject" class = "menuOption" > 
      <a href=""> Add Project </a> 
      </div> 


      <div id = "editProject" class = "menuOption" > 
      <a href=""> Edit Project </a> 
      </div> 

</div>

來源

2012-03-22 BigBug

a:link 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:visited 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:hover 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:active 
{ 
text-decoration:none; 
color: #B9D3EE; 
}

另外，這裏是一個關於僞代碼的參考，它應該爲您解決這個問題。

http://www.w3schools.com/css/css_pseudo_classes.asp

來源

2012-03-22 16:42:21

好感謝，認爲工程...但只是出於好奇......哪裏它得到紫色下劃線字體顏色/風格？ .. – BigBug 2012-03-22 16:44:21

默認情況下紫色是'visited'鏈接。我再次編輯我的答案，以顯示所有4個psuedo元素。更改每種顏色以查看其效果。 – 2012-03-22 16:45:24

嗯......但紫色是在任何事物被點擊之前發生的......？我也沒有任何「訪問」的代碼在我的CSS ...謝謝你的反應的方式:) – BigBug 2012-03-22 16:46:39

類似@Brett等待，但更簡潔

a{ 
    text-decoration:none; 
    color:#FFF; 
} 

a:hover 
{ 
    text-decoration:none; 
    color: #B9D3EE; 
}

它之所以是紫色，是因爲默認情況下的超鏈接是藍色的，但去的時候他們，然後變成紫色。在你的情況下，「」的網址基本上就是當前頁面，這個網頁很好。 :)

編輯刪除不需要的僞類：H/T @yunzen

來源

2012-03-22 16:48:13 aquinas

你只需要'a'。它有所有的僞類。例如，如果您只選擇「a：hover」或「a：link」，則訪問只會被忽略 – HerrSerker 2012-03-22 17:05:05

將鼠標懸停在文本上更改字體顏色

回答

相關問題