CSS Reference Guide: CSS :hover selector

The CSS :hover selector is a pseudo-class selector used to apply styles to an element when the mouse is moved over the element.

Here’s an example implementation:

a:hover {
    color: orangered;
}

We applied a :hover pseudo-selector to all a elements. This will make the text color of an a element to be orange-red when the mouse hovers over the element.

You can play with a live example on CodePen below:

See the Pen
css :hover by Chidume David (@philipsz-davido)
on CodePen.

We can also apply the :hover selector to all elements in the body:

body *:hover {
    background: yellow;
}

This will cause all elements inside the body element to display a yellow background when the mouse moves over the elements.

In addition to the background, we can also change the border, border-radius, font, text color, padding, margin, etc.

To apply the :hover selector to all elements in the document, we simply use the asterisk:

*:hover {
    border: 1px solid orangered;
}

This will cause the borders of hovered elements to be 1px wide, solidly red-orange in color.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free.