How to use 'hover' in CSS
Solution 1
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.
Solution 2
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
Solution 3
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"
Solution 4
a.hover:hover
Solution 5
a.hover:hover {
text-decoration:underline;
}
omg
Updated on December 03, 2020Comments
-
omg over 3 years
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?
-
chaos almost 15 yearsIt may be that he only wants <a>s that he puts his hover class on to have this behavior.
-
Alan Haggai Alavi almost 15 yearsYes, I missed that. Thanks, chaos.
-
omg almost 15 yearsbut it's not working in IE8,maybe I'm using a class name with '-' in it? say a.hover-link:hover ?
-
omg almost 15 yearsThanks alex, but is there any way to make it work for anchors without href attribute?
-
user3167101 almost 15 yearsIt should work with anchors without a href attribute. May I ask why you omit it though?
-
omg almost 15 yearsBecause if href is added,underline will come out even when cursor not on,I don't know the reason yet..
-
omg almost 15 yearsIt's fine,you are very frank,I'm indeed a CSS noob -,-
-
user3167101 almost 15 yearsDon't worry, you'll get there! Everyone does :)
-
Sikshya Maharjan almost 15 yearsI'm afraid not, IE (certainly as IE6, and maybe IE7 -I can't remember) is limited in its use of :hover, so that only <a> tags are able to use it. IE8 may have improved this, but I'm not entirely sure.
-
ajm almost 15 yearsIE7+ supports the :hover pseudo-class on arbitrary Elements.