DEV Community

Cover image for An Introduction to the Hover Pseudo-class
Laurie
Laurie

Posted on • Originally published at tenmilesquare.com

An Introduction to the Hover Pseudo-class

Before we dive into hover let's get some foundational knowledge out of the way. What is a pseudo-class?

To start, pseudo-classes are a keyword that follows a selector and appears after a colon (:). Something like this.

h1:active {
  color: blue
}
Enter fullscreen mode Exit fullscreen mode

In this case, the pseudo-class is active. It's describing the state of a given element. When the element is in that state, the associated styling rules are applied.

There are a number of pseudo-classes, all listed here.

Today, we're going to talk about a specific pseudo-class, hover.

Our Button

Let's start with a button. We've styled it to be nice and big and readable.

Now, it's a great semantic button, but it's flat. If we go to click it, nothing changes. No visual indication that it's available to be clicked!

So how can we change that?

Let's Use JavaScript!

For a long time, in order to create dynamic behaviors like this, you used JavaScript. Let's take a look at an example.

This codepen adds a mouseover event to our button and applies styling in that case. mouseover works just as it sounds, when a mouse is over the element, the code is triggered. This example also includes a mouseout event that resets the original styling when the cursor is no longer over the element.

hover

In our JavaScript example the mouseover and mouseout functions contained logic to change styles. But that's all we did. We shouldn't need JavaScript for that!

As it turns out, we don't. We can accomplish the same functionality with a CSS pseudo-class.

This pen is using the hover pseudo-class. hover is triggered when a user interacts with an element but hasn't yet activated it. This is nearly identical to the mouseover functionality we were using before.

Additionally, as long as the button:hover CSS styling is different than what is defined for a generic button, we don't need mouseout at all. hover will only be triggered when the element is in that state, otherwise, those styles will not appear. Not need to "turn them off" as we did in the JavaScript example.

If you need to think about it a different way, the JavaScript event is triggered and the styling rules are applied until you supersede them with new rules. In the case of the CSS pseudo-classes, the rules are only applied when the element is in that state and as soon as it isn't the styling no longer appears.

Fun example

What we did above was not particularly snazzy CSS. We only added a couple of rules to invert the colors of the button that appear on hover. So here is a slightly more fun example of some of the things you can do with hover!

Conclusion

And there you have it. Next time you're looking to alter an element based on its interactive state, check out some pseudo-classes and see if you can find what you're looking for there. It's wonderful to use CSS and HTML where you can! And it's widely supported!

Top comments (6)

Collapse
 
paceaux profile image
Paceaux

Next we need to the the PostCSS plugin for this.

Collapse
 
csorbamatyi profile image
Matyi Csorba

And if you add the "transition: background-color 0.3s linear;" to the button, you can make nice pure css animations with it.

Collapse
 
refiloedig profile image
Refiloe Digoamaye

simple explanation, thank you.

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Nice post ! 👏🏼

Collapse
 
laurieontech profile image
Laurie

Thanks so much :)

Collapse
 
gowtham profile image
Gowtham Kumar

Simple so clear tq,.