изменение цвета шрифта при наведении мыши на текст

Question

Я не очень много знаю о 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>

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

также, вот справочник по псевдо-классам, который должен прояснить это для вас.

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

Answer 2

Похоже на @Brett Подождите, но более кратко

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

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

Причина, по которой он был фиолетовым, заключается в том, что по умолчанию гиперссылки имеют синий цвет, но при посещении они становятся фиолетовыми. В вашем случае, URL "" - это, в основном, текущая страница, которая, ну, в общем, посещена. :)

Отредактировано для удаления ненужных псевдоклассов: h / t @ yunzen