:hover CSS Pseudo Class

Description

The :hover pseudo-class determines the style of the element when the mouse cursor hovers over it, but the element is not yet activated, in other words, the mouse button is not pressed.

Syntax

element:hover { … } 

Example

<p>
<a href="#">Test Link 1</a>
</p>
<p>
<a href="#">Test Link 2</a>
</p>
<p>
<a href="#">Test Link 3</a>
</p>
a:hover { 
background: #e07ef3;
color: #fff;
}

Notes

In Internet Explorer prior to version 7, the :hover pseudo-class works only for links.

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
4121142
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
37184X1X