MoreLesson 175Free preview

Display Element Hover

This lesson is part of How To · All levels

Summary

This lesson discusses how to display hidden elements when a user directs a cursor to its parent container. The effect can be created with a selector:hover that targets the child element, and then changes the opacity or visibility. For accessibility, use also:focus-within so that content can appear when the elements within it receive the focus of the keyboard.

Key points

Use the parent:hover child selector to display elements while hover
Adjust opacity or visibility so that the elements do not cover other content when hidden
Add:focus-within so the effects run for keyboard users too
Use transition for smooth transitions, but respect preferences-reduced-motion

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.