CSS :hover Pseudo Class
The :hover pseudo-class selects and styles the hovered element. It is triggered when the user moves the mouse pointer over it. Hovering does not require activating the pointing device.
The :active pseudo-class can coexist with :hover. When both apply, :active takes precedence due to cascade order rather than strictly overriding :hover.
INFO
Many touch devices do not support :hover because they lack a persistent hover state; tapping an element typically triggers :active or :focus instead.
For better accessibility, it is recommended to apply the same styles to :focus alongside :hover. To ensure styles only apply on devices that support hover, wrap your rules in @media (hover: hover) { ... }.
Version
Syntax
CSS :hover syntax
:hover {
css declarations;
}Example of the :hover pseudo-class:
CSS :hover Pseudo Class example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Hover over the links to see how the color changes.
Example of the :hover pseudo-class with the <a> tag:
CSS :hover link code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Example of the :hover pseudo-class with the <div> tag:
CSS :hover div code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Practice
What is the purpose of the :hover selector in CSS?