Mouse Hover Over on Links


Mouse Hover Over on Links

Topic Progress:

When you are creating a website and you want your users to know that a certain bit of text or a button etc is actually a link to another page, it is really good to use the hover property. This causes a certain sector that you define to change colour when a user puts their mouse over it.

Here is an example:

We are only going to look at using the hover on text for a link at the moment, but as you get more practise at CSS, try using the hover property on buttons and other components on your website!

The hover property is written in CSS in a different format to some of the other properties – it is actually placed next to the sector. Have a look below!


color: red;


The colour property is included in the hover section and the colour value that you put in is the colour that the text will change to when the mouse hovers over it. Remember to spell color without the ā€˜uā€™ in CSS.


Not recently active