changing font color on hovering the mouse over text

Question

I don't know very much about css, but i'm a tid bit stuck. I want to change the color of the font to a light blue on hover. however, i want the default color to be white... how do i do this? what i have right now, has changed the default text to purple.. and underlined :S it does change the font to blue though, on the hover..

code:

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>

score 5 · Accepted Answer · answered Mar 22 '12 at 16:42

5

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

also, here is a reference on the psuedo-classes which should clear this up for you.

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

answered Mar 22 '12 at 16:42

Brett Wait

397
3
7

okay thanks, that works... but just out of curiosity... where did it get the purple underlined font color/style from?.. – BigBug Mar 22 '12 at 16:44
1

the purple is 'visited' link by default. I edited my answer again to show all 4 psuedo elements. Change each color to see the effect it has. – Brett Wait Mar 22 '12 at 16:45
hmm... but the purple was occurring before anything was ever clicked...? i also didn't have any "visited" code in my css... thanks for the response by the way :) – BigBug Mar 22 '12 at 16:46
See the subject http://stackoverflow.com/questions/4774022/whats-default-html-css-link-color for mor information on default CSS across webrowser – Yoann Mar 22 '12 at 16:49
I think 'visited' status can happen if your browser has been to that link before. Clearing the history resets them to 'unvisited', but itn't a great solution. You could set 'link' and 'visited' to the same color so you don't see the purple. – Brett Wait Mar 22 '12 at 16:50
` a:link { text-decoration:none; color: Red; } a:visited { text-decoration:none; color: Green; } a:hover { text-decoration:none; color: Yellow; } a:active { text-decoration:none; color: Orange; }` It is just showing yellow and rest are not coming into play. – Pankaj Mar 22 '12 at 18:35

aquinas · Answer 2 · 2012-03-22T17:16:23.640

2

Similar to @Brett Wait, but more concise

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

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

The reason why it was purple, is because by default hyperlinks are blue, but when they are visited, then turn purple. In your case, the url of "" is basically the current page, which is, well, visited. :)

Edited to remove unneeded pseudo classes: h/t @yunzen

edited Mar 22 '12 at 17:16

answered Mar 22 '12 at 16:48

aquinas

23,318
5
58
81

You only need `a`. It has all pseudo-classes in it. The visited is only not overruled, if you just choose `a:hover` or `a:link` for example – yunzen Mar 22 '12 at 17:05

changing font color on hovering the mouse over text

2 Answers2