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.
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 and how to insert CSS code into your site.
If you're using a WYSIWYG web editor, you should instead check out my tutorials on Expression Web, BlueGriffon, Dreamweaver or KompoZer (depending on which editor you're using).
The default style in most browsers for a link can be described as follows:
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.
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 #cfc. 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.
If you only want certain links to exhibit the mouseover highlighting effect, you can do it by applying those effects to certain classes.
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:
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.
If you don't want your links to be underlined, add the following to your rules:
For example, if you don't want any of your links to be underlined, your code might look like the following:
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, some 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.
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-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Make Your Links Change Colour When a Mouse Hovers Over It (Using CSS)
