CODEWITHSUNDEEP
javascripthtmlcssstylesheet
sumit
sumit

Reputation: 11257

How to remove underline from a link and add underline on hover? (images attached)

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: NO Hover - Normal link

When I hover the Login link: When I hover the Login link

Upvotes: 11

Views: 13681

Answers (4)

andyb
andyb

Reputation: 43823

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.

Upvotes: 11

Harun
Harun

Reputation: 5179

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..

Upvotes: 0

Anil
Anil

Reputation: 21910

In your style sheet, whatever the ID is.

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

Upvotes: 0

alex
alex

Reputation: 490263

Assuming your login link has the id login...

#login {
   text-decoration: none;
}

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

Upvotes: 1

Related Questions