The CSS `:hover` pseudo-class selects an element while the user’s cursor is over it. Add it after a selector to style that state: `a:hover` targets a hovered link. A hover style can give immediate visual feedback, but it should not be the only cue for someone navigating with a keyboard. section 1.6.3 section 8.2.2
Make a call-to-action link respond
Start with a bright link, then darken it on hover. Give keyboard focus its own visible outline: `a { background-color: #ffa600; text-decoration: none; } a:hover { background-color: #e69500; } a:focus { outline: 1px dashed #e69500; outline-offset: 3px; }` The color change signals that the pointer is over the link; the outline identifies it during keyboard navigation. section 5.4.2
Hover can reveal more than a color change. On a hotel summary card, the title remains visible while the description and call-to-action are initially hidden. Hovering over the card moves its inner content into view and fades in those details. `:focus-within` triggers the same reveal when a child receives focus. Transitions smooth the changes in position, height, and opacity. section 5.5
Listing 5.17 Showing content on hover and focus-within
@media (hover: hover) and (min-width: 700px) and
(prefers-reduced-motion: no-preference) {
main > section > div {
transform: translateY(calc(350px - 8rem));
height: 5rem;
overflow: hidden;
transition: all 700ms ease-in-out; #1
}
div > *:not(h2) {
opacity: 0;
transform: translateY(1rem);
transition: all 700ms ease-in-out; #1
}
section:hover div, #2
section:focus-within div { #3
transform: translateY(0);
height: calc(350px - 4rem);
}
section:hover div > *:not(h2), #4
section:focus-within div > *:not(h2){ #5
opacity: 1;
transform: translateY(0);
}
}
Follow the paired `section:hover` and `section:focus-within` rules to see how the card and its hidden content return to their visible positions. section 5.5
Do not make essential information depend on hover. The card’s hiding and animation rules sit inside a media query requiring hover support, a window at least 700 pixels wide, and no reduced-motion preference. When those conditions are not met, the information stays visible without a hover reveal. For simpler controls, pair hover styling with a focus style: buttons can show a dotted outline on hover and a solid one on focus. section 5.0 section 5.5 section 8.2.2
