In keeping with my passion to make the internet experience as usable as possible, today’s tip is about changing the background colour of a paragraph when your mouse hovers over it.

This gives an improved reading experience and is especially useful for those with dyslexia. It helps the eye to stay focused as this is a one of the most challenging aspects of reading online. It isn’t so easy to run your finger across a webpage as you read!

The one thing you will need to consider is what is in each section of text. If you are working WordPress, it will create the paragraphs for you in the visual editor. Otherwise you will need to put paragraph tags around it.

So a paragraph will look like:

<p>This is my section of stand alone text</p>

Then in the style.css file the snippet of code below will need to be added:

p:hover {  background-color:  #dcd5d5; }

#dcd5d5 is called a hex code and it denotes a colour. Here is a link to the site color-hex where you can find the codes for other colours.

It’s as easy as that!