An Introduction to the Hover Pseudo-class
Tags: css, webdev, learning, beginners
Published: 2019-08-27 12:00:44

---
title: An Introduction to the Hover Pseudo-class
published: true
description: Dynamic behavior on the web isn't limited to JavaScript anymore. Come learn about CSS syntax that can respond to state!
tags: css, webdev,learning, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nmd2ijtqxn2dq76synf3.png
canonical_url: https://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.

```css
h1:active {
  color: blue
}
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Index_of_standard_pseudo-classes).

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.

{% codepen https://codepen.io/laurieontech/pen/pozERYY %}

Now, it's a great [semantic](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) 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.

{% codepen https://codepen.io/laurieontech/pen/ZEzpLZd %}


### 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.

{% codepen https://codepen.io/laurieontech/pen/PoYNQQW %}

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!

{% codepen https://codepen.io/laurieontech/pen/ExYgWQZ %}


### 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](https://caniuse.com/#feat=css-sel2)!