:hover in CSS: the hover effect and its mobile trap

Hovering is the very first interaction a visitor discovers on a site, well before any click. The :hover pseudo-class gives CSS the power to react to that simple mouse movement, without a single line of JavaScript.

It is one of the very first tools people learn in CSS, and it remains one of the most used, whether to change a color, reveal a menu, or simply confirm that an element is clickable.

Definition

The :hover pseudo-class targets an element while the mouse pointer sits above it. The associated style applies as long as the pointer stays over the element and disappears the moment it moves away.

A concrete example

.button {
  background-color: #2d6cdf;
  color: white;
  transition: background-color 0.2s ease;
}
.button:hover {
  background-color: #1a4fb3;
}

Here, the background color changes on hover, and the transition property softens that change instead of making it instant and abrupt. That combination, a state plus a transition, is what gives an interface the feel of being responsive and polished.

The mobile trap

On a computer, :hover works exactly as expected, since a mouse allows hovering over an element without clicking it. On a touch screen, that concept does not really exist: there is no in-between state between "not touching" and "touching". Mobile browsers sometimes simulate :hover on the first tap, which produces odd behavior, like a menu that seems to open on its own or a style that stays stuck after the tap.

What to do on mobile instead

Since :hover has no reliable touch equivalent, an alternative needs to be planned from the start of the interface design rather than bolted on afterward. On clickable cards, a subtle appearance change on tap, through :active, confirms that the press was registered. On menus that used to open on hover, touch forces a switch to an explicit click or tap that opens and closes the menu, rather than a hover state that simply does not exist on these devices.

/* tap feedback, useful on mobile */
.card:active {
  transform: scale(0.98);
}

/* hover stays reserved for devices that support it */
@media (hover: hover) {
  .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

This dual approach, a tap effect for every device and a hover effect reserved for precise pointers, covers every visitor without ever sacrificing the experience on either kind of device.

Combining :hover with other pseudo-classes

Hover naturally pairs with other Pseudo-class states, particularly :focus to also cover keyboard navigation, an essential practice for accessibility. The cursor shown on hover can also be adjusted with the cursor property, for instance to visually signal that an element is clickable even when it is not a standard link. On elements that should receive no interaction at all, pointer-events can even disable hover and click entirely.

Frequently asked questions

Some mobile browsers temporarily apply the :hover state on the first tap before triggering the click, which gives the impression that the style stays stuck to the element for a moment.

Yes, the hover: hover media query makes it possible to style the hover state only on devices with a precise pointer, such as a mouse, and skip it on touch screens.

It is not mandatory, but a short transition, around 150 to 250 milliseconds, makes the state change far more pleasant than an instant jump between two styles.