Hover
Hover is the interface state or interaction triggered when a pointing device is positioned over an element without activating it.
Tiny CSS Projects
The CSS :hover pseudo-class matches an element while a pointing device is positioned over it.
- How it is used
- Styles interactive states on links and buttons and reveals details on summary cards.
- How deep it goes
- Defines the pseudo-class and works through state styles and an animated card reveal, without examining browser selector internals.
- Examples
- Uses hotel summary cards, a color-changing call-to-action link, and outlined checkout buttons.
- What you can do after
- Build it from scratch: add visible hover feedback and a card reveal with a keyboard-focus equivalent and non-hover fallback.
Web Design Playground, Second Edition
The CSS hover pseudo-class matches an element while a pointing device is positioned over it.
- How it is used
- Reveals photo captions and before-and-after image overlays when a pointer moves over them.
- How deep it goes
- Explains hover through opacity changes, positioned overlays, and an optional transition without broader selector theory.
- Examples
- Uses a photo-gallery caption overlay and portfolio before-and-after images that appear on hover.
- What you can do after
- Apply it via CSS rules to reveal captions or overlay images, optionally fading the change with a transition.
Read how Web Design Playground, Second Edition explains hover →
CSS in Depth, Second Edition
Hover is the pointer-over state represented by the CSS :hover pseudo-class.
- How it is used
- Uses pointer-over states to provide visual feedback and reveal or emphasize navigation controls.
- How deep it goes
- Explains selector behavior, cascade order, transitions, and focus-related interaction, but stops short of browser event internals.
- Examples
- Demonstrates link-color feedback and a responsive navigation background that changes on hover or focus-within.
- What you can do after
- Apply it via CSS to style pointer-over links and coordinate interactive navigation with transitions and focus-within.
Related concepts
- opacityconfigures · Opacity is the degree to which a rendered element or color appears solid rather than transparent.
- keyboard interactioncontrasts with · Keyboard interaction is operating or navigating a digital interface through keyboard input, focus movement, and key-based commands rather than relying on a pointing device.
- pseudo-classused by · A CSS pseudo-class is a selector construct that matches elements according to a state, condition, or structural relationship.
- media queryused by · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.