[css] How to use 'hover' in CSS

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?

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;
}

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.

a.hover:hover

You should have used:

a:hover {
    text-decoration: underline;
}

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

There are many ways of doing that. If you really want to have a 'hover' class in your A element, then you'd have to do:

a.hover:hover { code here }

Then again, it's uncommon to have such a className there, this is how you do a regular hover:

select:hover { code here }

Here are a few more examples:

1

HTML:

<a class="button" href="#" title="">Click me</a>

CSS:

.button:hover { code here }

2

HTML:

<h1>Welcome</h1>

CSS:

h1:hover { code here }

:hover is one of the many pseudo-classes.

For example you can change, you can control the styling of an element when the mouse hovers over it, when it is clicked and when it was previously clicked.

HTML:

<a class="home" href="#" title="Go back">Go home!</a>

CSS:

.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }

Aside the awkward colors I've given as examples, the link with the 'home' class will be red by default, green when the mouse hovers them, blue when they are clicked and black after they were clicked.

Hope this helps

Not an answer, but explanation of why your css is not matching HTML.

In css space is used as a separator to tell browser to look in children, so your css

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

means "look for a element, then look for any descendants of it that have hover class and look of any descendants of those descendants that have hover state" and would match this markup

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a> 

If you want to match <a class="hover">I will become underlined when you hover on me</a> you should use a.hover:hover, which means "look for any a element with class hover and with hover state"

I was working on a nice defect last time and was wondering more about how to use properly hover property for A tag link and for IE browser. A strange thing for me was that IE was not able to capture A tag link element based on a simple A selector. So, I found out how to even force capturing A tag element and I spotted that we must use more specifc CSS selector. Here is an example below - It works perfect:

li a[href]:hover {...}

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

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)