:hover CSS Pseudo Class
Description
The CSS :hover pseudo class is used to apply styles to an element when the user hovers over it with a pointing device, such as a mouse or touchscreen. It is one of the most commonly used pseudo classes in CSS, and can be used to create a variety of effects, such as changing the color, background, or border of an element when it is hovered over.
To use the :hover pseudo class, simply add it to the selector of the element you want to style. For example, to change the background color of a button when it is hovered over, you would use the following CSS:
button:hover {
background-color: red;
}
This will change the background color of all buttons on the page to red when the user hovers over them.
The
:hover pseudo class can be used on any type of element, including links, images, and form controls. It can also be used in combination with other CSS selectors to create more complex effects. For example, to change the background color of a button when the user hovers over it and it is also active, you would use the following CSS:button:hover:active {
background-color: green;
}
This will change the background color of the button to green when the user clicks on it and holds the mouse button down.
The
:hover pseudo class is a powerful tool that can be used to create a variety of visual effects on your website. It is a relatively simple concept to understand, but it can be used to create very sophisticated effects.
Syntax
: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
The following table will show you the current browser support for the CSS :hover pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 4 | 2 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 1st October 2023