0 0 Votes

CSS: Underline Links only when Mouse Cursor is over them

Question by Guest | 03/02/2014 at 15:36

Recently, I visited a website on which the underlining of the links was only shown while the mouse cursor was moved over them. Otherwise, the links were designed like normal text.

I like this style and I would like to apply a similar effect to my own homepage. Does someone know how to code this via CSS or JavaScript?


Anja Proggy

Show Profile | Message
0Best Answer
0 Votes

Just add the following lines to your CSS file or to the CSS definitions on your page:

a {text-decoration:none;}
a:hover {text-decoration:underline;}

With this, the links will only be underlined during mouse over.

Explanation: In HTML, links have the notation "a". With "text-decoration: none", we turn off the underlining for the element "a", so that links are not displayed underlined anymore.

The selector ":hover" stands for the mouse hover (moving the mouse over an element). Here, we set the elememnt "a" to "underline. This sets the property "text-decoration" to "underline" while moving over with the mouse and "none" otherwise.

Important: In this context it should be mentioned, that a user of an Internet page should be able to simply recognize where there is a link and where there is no link. This is why, you should sign your links in some other way (for example by color) if there is no underline-sign, so that your visitors can find their way on your home page.
03/02/2014 at 18:20

ReplyPositive Negative

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own articles on askingbox.com. How to do.