:hover

The :hover pseudo-class defines the style of the element when the mouse cursor is over it, but the element is not yet activated: not pressed.

 

The :hover pseudo-class is triggered when the user hovers over the element but does not necessarily activate it.

Other link-related pseudo-classes can override this style, such as :link, :visited, and :active.

To style links properly, you need to specify the :hover rule before the :link and :visited rules, but after :active, as defined in the LVHA order: :link ⤑ :visited ⤑ :hover ⤑ :active.

Note
On touch screens, using :hover is problematic. Depending on the browser, the :hover pseudo-class may never work, or it may work for a while after tapping an element, or it may even continue to work after the user has tapped an element before tapping another element. Since touch devices are very common, it is important for web developers not to have content accessible only by hovering, since such content is inconvenient or impossible to use on such devices.

The :hover pseudo-class can be applied to any pseudo-element.

Syntax

/* Styles any <a> element when hovered over */

a:hover {
  color: orange;
  border-bottom: 1px dotted #000;
}

Example

As it stands, :hover can be used for more than just adding hover effects to links. In fact, this pseudo-class is extremely versatile and can be used to achieve effects like a dropdown menu built in pure CSS & HTML.

Hover over the links to see the styling take effect.

CSS & HTML

<p><a href="#">Link #1</a></p>
<p><a href="#">Link #2</a></p>
<p><a href="#">Link #3</a></p>

a:link {
  color: blue;
}
a:hover {
  background: orange;
  color: white;
}

And here is a more exciting example: multiple-level menu navigation.

CSS & HTML

<ul class="menu">
    <li><a href="#">Menu Item #1</a>
        <ul>
            <li><a href="#">Menu Item #2</a></li>
            <li><a href="#">Menu Item #3</a></li>
        </ul>
    </li>
    <li><a href="#">Standalone Item</a></li>
</ul>

ul {
	width: 200px;
	list-style: none;
	margin: 0;
	padding: 0;
}
li ul {
	position: absolute;
	display: none;
	margin-left: 165px;
	margin-top: -2em;
}
li a {
	display: block;
	padding: 5px;
	text-decoration: none;
	color: #666;
	border: 1px solid #ccc;
	background-color: #f3f3f3;
}

li a:hover {
	color: #ffe;
	background-color: #5488af;
}
li:hover ul {
	display: block;
}