CODEWITHSUNDEEP
csshover
Almas Adilbek
Almas Adilbek

Reputation: 4400

What is the difference between .hover and :hover?

I was digging some css codes written by someone and I found this:

li.hover, li:hover {

}

Is there any difference between .hover and :hover?
Maybe some browsers act differently for hover?!

Upvotes: 6

Views: 3724

Answers (4)

user166390
user166390

Reputation:

:hover is a psuedo-class while .hover is a selector for the class hover. These symbols (: and .) don't change meaning from any other CSS selector construct: see the W3C CSS Level 3 Recommendation for all the details.

Presumably there is some JavaScript to toggle the hover class, perhaps because of lack of :hover support for LI elements in a "legacy" browser. I know that IE5/6 (ick!) only supported :hover for links, however:

(And, as always, make sure the page is not in "quirksmode" :-)

Happy coding.

Upvotes: 9

Ry-
Ry-

Reputation: 224904

Yes: one's a class (that's .hover) and the other's a pseudo-class (:hover). The pseudo-class will be matched when the mouse is over the element, and the class will be matched when the element has that class.

Presumably, the class is added by JavaScript. This could be for compatibility (some version of IE, I believe IE6 or IE7, only supports :hover on <a> elements) or it could be for extra features (sticky highlighting, for example).

Upvotes: 2

deceze
deceze

Reputation: 522085

.hover is a normal class name like any other class name, it has no special meaning.
:hover is the hover pseudo-class which you cannot create yourself, which is only applied when the user hovers over an element with the mouse.

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

.hover is just a class name (possibly used to mean "something I [the coder] want to look the same as a hovered item", whereas :hover is the psuedo-class for when the mouse is over it. (Personally I use .hl instead of .hover for something like that)

Upvotes: 6

Related Questions