MenusLesson 9Free preview

Hover Tabs

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of Hover Tabs where the tab content automatically changes by simply moving the mouse cursor (hover/mouseover) to the tab button without requiring user clicks. This approach accelerates the exploration of information in the desktop e-commerce catalog navigation.

Key points

Replace the onclick event with an onmouseover on the HTML element of the tab button
Provide instant feedback to desktop users when browsing categories
Apply subtle debouncing if necessary to prevent over-sensitive content switching
Maintain event clicks or touch for the convenience of the user of the touch screen device

Full lesson

Code examples and quizzes

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