How to use 'hover' in CSS

Question

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 1

a.hover:hover

Answer 2

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.

Answer 3

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

Answer 4

You need to concatenate the selector and pseudo selector. You'll also need a style element to contain your styles. Most people use an external stylesheet, for lots of benefits (caching for one).

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

<style type="text/css">

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

    }

</style>

Just a note: the hover class is not necessary, unless you are defining only certain links to have this behavior (which may be the case)

Answer 5

You should have used:

a:hover {
    text-decoration: underline;
}

hover is a pseudo class in CSS. No need to assign a class.

Answer 6

The href is a required attribute of an anchor element, so without it, you cannot expect all browsers to handle it equally. Anyway, I read somewhere in a comment that you only want the link to be underlined when hovering, and not otherwise. You can use the following to achieve this, and it will only apply to links with the hover-class:

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

a.hover {
    text-decoration: none;
}

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