Skip to content Skip to footer

How to style hover

Illustration of computer mouse which is used for hovering over a link.
Article Content
  • What the hover element is.
  • Why you have good color contrast and underlines in their styling.
  • How you can style the hover of individual HTML elements differently.
  • How you can use scale transform to further enhance hover accessibility.

For users who use the mouse frequently, the appearance of links when the cursor hovers over them is crucially important to the ease within which they can navigate the content of the website.

How this appearance is controlled is through the styling in the pseudo-class hover. This sits within the family of pseudo-classes used to style links.(Read the accessible links article here) It allows the text of the link to change colour, be underlined, animated or magnified when a user hovers over a link (Either with a mouse or with their finger on a touch screen).

Using Hover Styling Responsibly

The hover element can be as simple or as complex as you make it. When styling it, you should always bear in mind the convenience for the user, to ensure that your website is legible and usable for everyone.

The starting point here is to ensure that there is appropriate colour contrast. (Read about Colour Contrast here). You need to make sure that change in state that appears on hover is clearly legible to users. Mastering the colour that a link changes to on hover can be easily underestimated within the context of the more complex things that you can do with this pseudo-class.

However, it is worth spending the time to ensure you get this correct. This is because of the frustrating experience of never quite being sure, over whether they have successfully hovered over a link.

Having the text underlined is an important secondary visual indication, particularly the users who may not be able to rely on colour. You can see the code to style the hover with underline demonstrated below.

Screen shot of Hover code CSS styling.
Written with a colon before hover, followed by a curly bracket, ‘text-decoration’, and then ‘underline’. After this is a semi-colon and then a final closing CSS bracket.

Whether or not the text is underlined on hover depends on previous choices you made in your design. For example, it is common practice to not have links underlined within the navigation. In this case, you then should have the links underlined on hover, unless you have another visual indication which is not dictated by colour (e.g., the text magnified, even then, I would recommend in most cases still having them underlined).

Styling different HTML elements

You’ll notice that in the syntax of the hover pseudo-class there is : with a space before it “: “. If you want your hover style to be used across all links, you never need to put anything before the “:” .

However, there may be cases where you want to style the links in different sections separately. In this case, you would put the name of the element you want to style specifically in front of the colon.

For example, you would write. The Code in style as demonstrated below.

Screenshot of article code styling.
Written article and a colon before the hover, two curly brackets at the start and the end, color followed by colon and underline and semi-colon.

You would use code like this if you wanted the hover to change the links to a specific colour within articles that were different to the rest of the HTML document.

Proceed with extreme caution with cursor effects.

Once you’ve mastered the basics, of the focus element you may be tempted to experiment with animations and cursor effects, especially once you gain confidence with Javascript.

This was very popular in the 1990s and is still used now with more experimental designs. Whilst it is something that can be done responsibly, it is something that can go badly wrong in terms of accessibility. At the very least, you need to have a way for the user to turn off these effects. This is because not only can they affect legibility, but also any effects which affect the motion can have damaging impacts for people with certain disabilities e.g. motor issues, cerebral palsy and could be distracting for people with conditions such as ADHD.

Useful Tip

If you do plan on using any form of animation. You need to make sure there is a way of turning it off for users who would prefer not to have it. Read more accessible animations in this CSS tricks article.

Using focus pseudo-class to enhance the accessibility experience.

You can without using complex JavaScript or animations, start to make small adjustments to the styling of the focus element to increase accessibility.

Heydon Pickering in his book on inclusive design patterns, has an excellent example of how you can increase accessibility on hover by allowing the text to be magnified. This enables users who may have impairments to be able to see links more clearly.

This technique involves adding a transform which manipulates the text and scale, increasing the size of the text to a certain unit. On the links you could add the following code as shown below.

Code Sample for Hover scale.
Written with hover, two curly brackets at the start and the end, transform followed by colon and scale, brackets with 1.2 inside and semi-colon.

This will increase the size of the text on hover by one 1.2, so it will become magnified when a user hovers over it. You can adjust this based on what works in testing with your design. For example, you might want a larger magnification on the links in in the navigation than you do in the text. So, in this case, you would need a different scale and add the specific HTML element that you want to style differently. For example the code would look like the following below.

Navgiation Hover code screenshot.
Written with nav followed by a colon then hover. Two curly brackets at the start and the end, transform followed by colon and scale, brackets with 1.5 inside and semi-colon.

If you add in ‘underline’ to this styling, you have a clear accessible way to add an extra element to the appearance and focus, which enhances the usability for users.

Leave a Reply

Your email address will not be published. Required fields are marked *