:hover(CSS selector)

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 visibilityvisible 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
positionrelative (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).