CSS Selector Level 2 » User action pseudo-class

The user action pseudo-classes :hover and :focus allows to visualize if the user hovers oder focuses an element.


Hover

The :hover selector matches if the user with a pointing device hovers over an element.

Syntax

Copy
E:hover {
    /* declarations */
}

Example

Copy
a:hover {
    outline: 1px dashed gray;
}

The link will get a gray dashed outline border if the user hovers the link.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (2.0) Yes (12.0) Yes (4.0) Yes (4.0)
Mobile No No No No No No

Focus

The :focus selector will match any element which has currently keyboard or input focus.

Syntax

Copy
E:focus {
    /* declarations */
}

Example

Copy
a:focus {
    color: red;
}

The link will change his color to red if the link is focused.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (2.0) Yes (12.0) Yes (4.0) Yes (4.0)
Mobile Yes (1.0) Yes (4.0) Yes (2.0) No No Yes (2.0)

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera