How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS)

If you were to move your mouse over the links on learnfre.blogspot.com, you would notice that they are highlighted with a different colour. This article explains how you can achieve such mouseover or hover effects with links on your site.

Cascading Style Sheets (CSS) Code to Highlight Links on MouseOver

The default style in most browsers for a link can be described as follows:

a:link {
  color: blue ;
  background-color: transparent ;
  text-decoration: underline ;
}

The a:link portion basically indicates that the block following, enclosed in the curly brackets, is to be applied to links. Each line in the block gives a rule. The line beginning color tells the browser that the anchor text of the link is to be blue. The "transparent" value given to background-color means that whatever was in the background will be visible underneath the link text (including its existing colour). The text-decoration value of "underline" causes the browser to render the text with an underline.

To style the link when the mouse is hovering over it, simply add rules for a:hover. Take the following for example.

a:hover {
  color: black ;
  background-color: #def ;
}

How to Create the Hover Effect Only for Certain Links

If you only want certain links to exhibit the mouseover highlighting effect, you can do it by applying those effects to certain classes.

a.specialeffects:hover {
  color: black ;
  background-color: #ff0 ;
}

The above code will cause links of the class "specialeffects" to have black text against a yellow background when the mouse is over it. To use it make your links like the following:

<a class="specialeffects">this link will turn yellow</a>

That is, give links that you want the highlighting effect the "specialeffects" class.

You can of course name your classes anything you want, and not just "specialeffects". Whatever name you choose, make sure the name you use in your HTML link matches that in your CSS rules.

How to Remove the Underline from Links

If you don't want your links to be underlined, add the following to your rules:

text-decoration: none ;

For example, if you don't want any of your links to be underlined, your code might look like the following:

a:link {
  color: blue ;
  background-color: transparent ;
  text-decoration: none ;
}

However, before you rush out to remove the underlining from all your links, be aware that links that are blue and underlined are well-established as a standard on the Internet. Just about everyone who sees blue underlined text on a site automatically knows that it denotes a clickable link. If you change the colour of your links and remove the underlining, your visitors may not even realise that they can click the link for more information, mistaking it for an attempt at creating a colourful page. Even if you put a cute graphic beside the link to try to indicate that it is a link, most people will just regard it as a decorative picture and not realise what it symbolizes. This is because there is no universally recognised method of graphically depicting a link other than using blue underlined text.

Conclusion

That's it. Adding such mouseover effects to your links is fairly easy. Simply add the code given above, customize it to suit your site's design, and your links will now have a different appearance or colour scheme when the mouse moves over it. Feel Free to Ask Any Help About This Tutorial. :)