:hover (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

:hover {
declaration block
}

Description

The :hover pseudo-class matches any element that’s being designated by a pointing device. The term designated refers to the process during which the cursor is hovered over the box generated by the element.

Example

This rule will apply a border to any img element over which the cursor is hovered:

img:hover {
  border: 5px solid #F2F2F2;
}
It should be noted that CSS does not define which elements may be in the above state.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

In Internet Explorer versions up to and including 6:

  • :hover is applied only to HTML a elements that have an href attribute.
  • :hover is counted as two classes/pseudo-classes in the specificity calculation.
  • :hover is ignored if it’s not in the last simple selector.

Neither Internet Explorer 5.5 nor 6 supports the chaining of pseudo-classes; only the last pseudo-class is honored in these browsers.

There is a bug in Internet Explorer (up to and including version 6), where trying to apply styling to a child element based on a parent’s hover state will fail:
a.test:hover span {background:red}
To make IE6 take notice of the rule above, there needs to be a style rule applied to the a element’s hover state itself. The simplest approach is to apply the following rule in combination with the above:
a.test:hover {visibility:visible}

There is a similar bug in Internet Explorer version 7, though it applies to elements other than anchors. The fix is the same, in that the hover state of the parent element must be targeted with a style rule directly before the child element can react to the hover. However, the bug is inconsistent; sometimes the rule will work and sometimes it won’t. The fix, however, should ensure that it always works. The bug is most evident in drop-down menus where a li:hover ul is in action; the fix would be to apply visibility visible to the li:hover selector.

In Internet Explorer 7:

  • The element occasionally remains in the hover state if the cursor is moved from the element while the mouse button is pressed; the hover state sometimes fails to apply when it should.
  • :hover doesn’t match elements with negative z-index property values.
  • :hover on elements other than anchors is often slow to react. On large tables this can prove to be almost unusable. A fix is to add position relative (assuming the element is not positioned) to the element being hovered.

In Internet Explorer version 8, the manipulation of elements with negative z-index is buggy when used in conjunction with :hover or :active rules (source: James Hopkins).

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#6
Contributed:
by Louis Lazaris
Date:
Wed, 27 Oct 2010 05:58:26 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

In the last bulleted section discussing "The element occasionally remains in the hover state..." it says this applies to IE7. According to my own testing, this bug occurs in IE6, IE7, and IE8.

That is, if you hover an anchor, mouse down, then roll off with the mouse still down, the hover color will sometimes remain visible until you hover on and off the anchor again.

ID:
#2
Contributed:
by dbolton
Date:
Thu, 07 Feb 2008 06:32:23 GMT

col:hover and colgroup:hover not supported

Related Products