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:

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

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

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

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

Which of these topics are you most interested in?
ReactVueAngularNew frameworks

Do you spend a lot of time reproducing errors in your apps?
YesNo

Which, if any, do you think would help you reproduce errors more effectively?
A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently

Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

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.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. 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 apps — Start monitoring for free.