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: