UI Buddy

Hover, Focus, & Other States

Learn how to style elements on hover, focus, and other states.


Similar to adding media prefixes, add a state prefix instead before any property:value pair and watch it magically apply state-based styles on an element. For example:

<p class="color:red hover:color:blue"></p>

In this example, the paragraph element has a color of red, and will change its color to blue on hover.

The following table lists all supported element states:

HoverMouse over
ActiveActive link
VisitedVisited link
FocusFocused input element
DisabledDisabled input element
CheckedChecked input element

Change children styles on parent hover

This is especially useful if you want to do things like changing the color of a button along with the text size of a paragraph inside a card when you hover over that card. Just add a parent class to the element you want to hover over and prefix the word parent before the state like parent-hover:property:value or parent-focus:property:value to achieve the desired effect. Example:

<div class="parent card">
  <button class="parent-hover:bgc:blue"></button>
  <p class="parent-hover:fsz:24px"></p>