Steps for Creating Text Rollover (Hover) using CSS

July 21, 2008

While souring through the internet, i found this great helpful tip for creating a plain simple text which will change its color on rolling the mouse pointer on it. I assume readers reading my tutorial will have basic and general knowledge and information of Hyper Text Markup Language (HTML) and also they understand what CSS is (not just its full form but what it is used for). If you have any queries regarding this post, feel free to leave a comment with your email and I will try my level best to solve it

First, open a new notepad file and create a HEAD Tag. Then add a STYLE Tag in order to assign your text the effect of roll over.

<head>
<style type=”text/css”>

Then, for example, assume that we have a blue colored link and want “red” color as roll over effect, try this,

<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:hover {
color:#FF0000;
}
</style>
</head>

If you feel you want to change the color of visited link then you can add the below code :

a:visited {
color:#336600;
}

The above code will help in changing the color of visited link to green.

Now, if you wish to display a background color on rollovering then just add the below code in a:hover area,

background-color:#0066FF;

Say for example :

Our code is :

<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:hover {
color:#FF0000;
}
</style>
</head>
Add <head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:hover {
color:#FF0000;
}
</style>
</head> in a:hover to display the background color on rollover

Then our final code will look like this,

<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:visited {
color:#336600;
}
a:hover {
color:#FF0000;
background-color:#0066FF;
}
</style>
</head>

If you wish to add a underline on the link on rollover, then add the below code in a:hover too

text-decoration:underline;

then the last code for rollover link will look a bit like this,

<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:visited {
color:#336600;
}
a:hover {
color:#FF0000;
background-color:#0066FF;
text-decoration:underline;
}
</style>
</head>

If you wish, you can give other effects on the links like, bold text on rollover effect, change in font size on rollover effect, change in font style on rollover effect, by adding these below code lines in a:hover.

font-weight:bold;
font:Arial, Arial, sans-serif;
font-size:16px;

The above mentioned example is just a sample of what can be done using CSS. Hope it helps you in building websites designs.

Nitesh Pednekar (niteshseo86@gmail.com)
SEO in Thane, Mumbai

Advertisements