How to use 'hover' in CSS

css hover anchor
omg picture omg · May 25, 2009 · Viewed 132.9k times · Source

I used the code below in order to fulfill this target:

When mouse hover on the anchor, the underline comes out,

but it failed to work,

    <a class="hover">click</a>

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

What's the right version to do this?

Answer

David says reinstate Monica picture David says reinstate Monica · May 25, 2009

If you want the underline to be present while the mouse hovers over the link, then:

a:hover {text-decoration: underline; }

is sufficient, however you can also use a class-name of 'hover' if you wish, and the following would be equally applicable:

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

Incidentally it may be worth pointing out that the class name of 'hover' doesn't really add anything to the element, as the psuedo-element of a:hover does the same thing as that of a.hover:hover. Unless it's just a demonstration of using a class-name.

Related questions

Set a:hover based on class

I have the following HTML: <div class="menu"> <a class="main-nav-item" href="home">home</a> <a class="main-nav-item-current" href="business">business</a> <a class="main-nav-item" href="about-me">about …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More