I want underline to be removed from a link. Also I want underline to appear when I hover it with my mouse pointer. How can this be done? Pls help.

No hover:

When I hover the Login link:

I want underline to be removed from a link. Also I want underline to appear when I hover it with my mouse pointer. How can this be done? Pls help.

No hover:

When I hover the Login link:

• javascript
• html
• css
• stylesheet

4 Answers 4

You need to turn off the CSS property text-decoration for the link and then use the :hover dynamic pseudo class to add the text-decoration back when hovering.

a {
    text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

Demo

Also, you might also need to style the :visited:hover pseudo class so that the underline appears on links a user has already visited. link order in css is a good answer because the order of the CSS rules matters.

Assuming your login link has the id login...

#login {
   text-decoration: none;
}

#login:hover {
   text-decoration: underline;
}

In your style sheet, whatever the ID is.

#LoginButton a:active {text-decoration: none;}
#LoginButton a:hover {text-decoration: underline; color: white;}

Call a CSSClass within the login button and define the following lines in the style sheet,

   .ClassName a:link {text-decoration:none;}//removes underline


   .ClassName a:hover {text-decoration:underline;}// displays underline on mouse over

Hope this helps..