How to Make Your Links Change Colour When a Mouse Hovers Over It

Using CSS to Highlight Links on MouseOver


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

by Christopher Heng, thesitewizard.com

If you were to move your mouse over the links on thesitewizard.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.

Prerequisites

This article assumes that you already know how to create a website and have probably already have one or have one in the works. If this is not true, you should read my article on How to Start Your Own Website.

The article is also targeted at those coding directly in HTML and CSS. You should already have some general knowledge of what CSS is, such as that provided in my CSS Primer. You will also need to know how to insert CSS code into your site.

If you're using a WYSIWYG web editor, you should instead check out my tutorials on Dreamweaver, Nvu or KompoZer (depending on which editor you're using).

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 ;
}

This rule, taken from thesitewizard.com's style sheet at the time this article was written, causes the link to have black text on a background with a colour defined by the RGB value #def. You can see its effect by hovering your mouse over any of the links in this article.

For those not familiar with RGB colour values, they are basically a set of three colours, red, green and blue, which when put together define the final colour you want. Since browsers recognize only a very limited subset of colour names, if you want any colour more esoteric than the run-of-the-mill "blue", "black", "white" and the like, it's best to specify them using an RGB value. You don't have to memorize the values though, since most programmer's editors have a colour picker which will generate the correct value for you.

You should of course choose colours that suit your site's design.

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.

This doesn't mean that you're stuck with blue underlined text for links. I only write this so that you know that there are downsides to changing the defaults that everyone expects. If you need (or want) to remove the underlining anyway, try to find a way to compensate for the lack of visual cues for your links. The hover effects described earlier may help a bit, although they only work if your visitor actually moves his/her mouse over the link.

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.

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.