CSS :hover, :active and :visited

A pseudo-class describes a state an element is in. You write it after a selector with a colon.

:hover

Applies while the mouse pointer is over the element.

1
2
3
4
5
6

<style>
  .btn { display: inline-block; padding: 10px 20px; background: #1a5276; color: #fff; text-decoration: none; border-radius: 6px; transition: background .2s, transform .1s; }
  .btn:hover  { background: #d94a00; }
  .btn:active { transform: translateY(2px); }
</style>
<a class="btn" href="#">Hover and press me</a>

:active

Applies while the element is being pressed: from mouse down to mouse up. It is a good place for a small “pressed” effect.

:visited

Applies to links the visitor has already opened. For privacy, you can only change colors in it. See Link States for the correct order (LVHA).

Hover cards

1
2
3
4
5

<style>
  .card { width: 200px; padding: 14px; border: 1px solid #e6ddd7; border-radius: 8px; transition: box-shadow .2s, transform .2s; }
  .card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.18); transform: translateY(-3px); }
</style>
<div class="card"><b>Hover over this card</b><p>It lifts slightly.</p></div>

Important: touch screens

Phones have no real hover. A tap may trigger hover briefly, or leave it “stuck” until the next tap. The rules:

• Never hide essential information or controls behind hover.
• Treat hover as a bonus.
• To style hover only on devices that really have it: @media (hover: hover) { .btn:hover { ... } }.