テキストの上にマウスを置いたときのフォント色の変更

Question

私はcssについてはあまりよく分かりませんが、ちょっとしたことがあります。フォントの色をホバーのライトブルーに変更したい。しかし、私はデフォルトの色を白にしたいと思います...私はこれをどのようにしますか？私が今持っているもの、...紫にデフォルトのテキストを変更し、下線あります。■それはホバー上で、しかし青にフォントを変更するん..

コード：

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> 

Answer 1

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; 
} 

また、これはあなたのためにこれをクリアする擬似クラスのリファレンスです。待って@Brettに似ていますが、

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

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

それは紫だった理由をより簡潔

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

Answer 2

は、デフォルトでは、ハイパーリンクが青であるため、ですが、それらが訪問される際には、紫色のターン。あなたの場合、 ""のURLは基本的に現在のページです。これはよく訪れたページです。 :)

編集不要な疑似クラス削除する：H/Tの@yunzen作品