How to Add CSS Styling to An Element When Going Over it (on Hover)

How Do You Add CSS Styles on Hover? Source: Jamie Street

New to CSS? Not sure how to add styles on hover?

Luckily for you, it’s pretty easy 😄 Here’s how it’s done:

Let’s Make a New Link 🔗

<a class="link">Hover Over Me!</a>

Now, let’s add a few styles to this link:

.link {
  color:red;
  font-size:20px;
  border-bottom:2px solid red;
  cursor:pointer;
}

Your link should now look something like this: (Click “Run Pen”)

Now to make the magic happen, we’re going to add a new selector in the CSS file.

.link:hover {
  color:black;
  border-bottom:2px solid black;
  transition:0.5s;
}

So all that’s needed to change the styles on hover is to use the :hover selector on the HTML component you wish to alter. In this case, we’ve decided to change the color of the text and border as well as adding a transition time.

Try it out for yourself in the Code Pen below:

Want to do it with an image or div? It’s the exact same!

All you need is a “:hover” CSS selector on your chosen element:

.image:hover {
  opacity:0.5;
}
.container:hover {
  background-color:black;
}

That’s All Folks!

That was how you can adjust element styles on hover in CSS.

If you enjoyed this tutorial and would like to see more, make sure to give this story a clap 👏!

If you really enjoyed this tutorial, consider buying me a cup of coffee! ☕