CSS: Underline Links only when Mouse Cursor is over them
Question by Guest | Last update on 2023-11-24 | Created on 2014-02-03
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 website. Does someone know how to code this via CSS or JavaScript?
Related Topics
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Comment
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
Pipette: Fetch Colors from all over the Screen
Tutorial | 0 Comments
Delphi: GetCursorPos problem on Windows 8.1 with scaling
Open Question | 1 Answer
Delphi/Lazarus: Is the ALT, SHIFT or CTRL key pressed?
Tutorial | 0 Comments
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
Just add the following lines to your CSS file or to the CSS definitions of 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 element "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.
Last update on 2023-11-24 | Created on 2014-02-03