Chidume Nnamdi I'm a software engineer with 6+ years of experience. I've worked with different stacks ranging from WAMP, to MERN, to MEAN. My language of choice is JavaScript; frameworks are Angular and Nodejs.

CSS Reference Guide: CSS :hover selector

37 sec read 174

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.

*: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 — .

    Chidume Nnamdi I'm a software engineer with 6+ years of experience. I've worked with different stacks ranging from WAMP, to MERN, to MEAN. My language of choice is JavaScript; frameworks are Angular and Nodejs.

    Leave a Reply