I previously wrote about links and the visited state. This post is about links and the hover state – what it is, why it’s important, and how to use it.
A link’s hover state is activated whenever your mouse is located over the link, “hovering” it. This is also known as the “rollover state”.
When your cursor changes from the normal arrow to a hand, it’s typically because the “hover state” is activated.
Links are your navigation. Whenever you make a change to your site’s links, you’re effectively changing the way people navigate your site.
There are many reasons to pay attention to the hover state of your link – here’s the 3 best reasons:
You should always highlight the actual content of the link. A cursor-change from arrow to hand is not enough (this won’t help the user identify which link she is actually hovering).
We recommended a strong and clear highlight. A color change is good, but you’ll want to change the contrast too (preferably to something brighter) so color-blind people can easily notice the change too.
If your links are bold by default, keep them bold. If your links are normal weight by default, keep them that way. Changing the weight of your font can cause the entire layout to shift which is obviously not desirable.
Do you have any tips on how to format these most fundamental aspects of a site’s navigation?
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Also, if you don’t underline your links, it is a good idea to at least add the underline on hover.
Generally you should underline all relevant links on your site though.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org