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 lets you replay user sessions, eliminating guesswork around why bugs happen by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.

LogRocket's Galileo AI watches sessions for you, instantly identifying and explaining user struggles with automated monitoring of your entire product experience.

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