CSS Basics: Using :hover and :active Pseudo-Classes

Jess Mitchell

CSS offers several pseudo-classes for styling elements that can help differentiate between various element states. Here we’ll focus on :hover and :active to see how to improve visual feedback for users and make sure your UI looks great across devices! 🔥

What is a “Pseudo-Class”?

A pseudo-class selects the state of a selector in CSS.

Pseudo-classes must be used in conjunction with a regular CSS selector, whether that be an element, class, or id. Pseudo-classes are typically based on user interactions with elements. They offer the option to change an element’s styling depending on which state it’s in. ✨

Hovering over an element, like a button, is one example of changing an element’s state in CSS. The “hover” state can be styled differently than the default non-hovered state.

Similarly, clicking a link will update a link’s state in CSS and make it “active”.

Giving Users Visual Feedback

Using pseudo-classes can be extremely helpful for giving users immediate visual feedback. An intuitive user interface (UI) will let the user know how to interact with the UI, like whether text can be clicked. For example, updating a navigation bar item’s styling on hover lets the user know the mouse is in a clickable area, which may extend past the actual text.

However, if everything on a page were to have hover styling, it would visually be pretty overwhelming. It also would not tell the user much about how they should interact with the page. Therefore, it’s best to ask yourself what the pseudo-class styling is supposed to tell the user.

Using pseudo-classes in CSS can help give users visual feedback so they understand how to interact with the UI.


The :hover Pseudo-Class

The :hover pseudo-class is one of the most common ones you’ll come across in CSS. Let’s first look at some examples of how to use it.

As a baseline, let’s style all <a> tags to be the color green.

a {
  color: green;
}

If we want to change the color on hover, we declare a second style where we select the <a> tags again but then add the :hover pseudo-class.

a {
  color: green;
}

a:hover {
  color: yellow;
}

Try hovering here to see the intended effect.

Even though :hover is commonly used for links, like in the example above, you can use it on any selector. Here are a few more examples using a <p> tag, a class, an id, and a combination of them:

p:hover {
  background-color: green;
}

.gator:hover {
  font-weight: bold;
}

#cayman:hover {
  font-size: 2rem;
}

input.gator[type="text"]:hover {
  border: 1px solid yellow;
}

input.gator[type="text"]:hover span {
  border: 2px solid black;
}

Note that the pseudo-class comes at the end of a selector. It should be added to the element being hovered, which can be a parent of a more specific selector.

The benefit of using the :hover pseudo-class is that CSS does all the work for us. Sorry JavaScript, but we don't need any 'if' statements or state management here! 💪

Using :hover with Different Devices

When styling responsive pages, it’s important to consider how those styles apply to various devices. A user may look at a webpage on a computer or phone, for example, and they may use a touch screen, mouse, or keyboard (etc) to trigger UI interactions.

  • Mouse: The :hover styling will show when using a mouse and hovering the pointer over a styled element.
  • Keyboard: Navigating by keyboard through a page will not trigger the :hover styling because there’s no pointer event.
  • Phones/touch screens: The :hover and :focus pseudo-classes often get conflated, so :hover will get triggered on “click”/touch even though there’s no pointer to hover.

The :active Pseudo-Class

Like the :hover pseudo-class, :active should be used in conjunction with your regular CSS selectors.

:active can be used to select an element in its “activated” state. Most commonly, it is used for links and refers to when a link is being selected (or clicked). To see the active styling, try clicking down on the link below:

I turn purple on click

This is achieved by adding the :active pseudo-class to a valid CSS selector.

a {
  color: green;
}

a:hover {
  color: yellow;
}

a:active {
  color: purple;
}

Using :active on Different Devices

Since :active refers to when an element is in the process of being selected, it works fairly similarly across devices.

  • Mouse/touch screens: With a mouse or touch screen, the active styling will show when an element is selected (before the selection is released).
  • Keyboard: When using a keyboard, the active styling will not show if you select an element with the Enter key because it’s submitted on keydown. However, if you select an element (like a button) with the space bar, it should show the active styling until you release it.

Does the Order of Pseudo-Classes Matter?

In the case of pseudo-classes, the order does matter. :hover styling will override :active styling, so it must be declared before the :active styling.

Correct Order 🚀

Using the order of pseudo-class declarations in the example above, we get the intended styling here for the default, hovered, and active states.

However, if we reverse the :hover and :active styling declarations, the :hover styling will unfortunately override the :active styling.

a {
  color: green;
}

a:active {
  color: purple;
}

a:hover {
  color: yellow;
}

Wrong Order 🙈

Notice that now when you click down on the link, it doesn’t turn purple anymore, even though we’ve declared the active state color.

Always place your active styles after your hover styles to make sure they get displayed correctly. 🌈


Recap

When styling element states with :hover and :active, remember to:

  • Use these pseudo-classes to convey information about elements (like if they’re clickable)
  • Put the pseudo-class at the end of the CSS selector
  • Be mindful of how pseudo-classes show up on different devices
  • Make sure :active comes after :hover in your CSS declarations
  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#