Create a Text Rollover(Hover) using CSS
In this tutorial I am going to show you how to create simple text which change its color on roll over . I assume you have a basic knowledge of HTML, and know what CSS is. If you have any questions please leave comments in this post with your email and i will try to solve it.
First of all open a new notepad file and make a head tag,
then you need to add a style tag in order to give your text a roll over effect
<head>
<style type=”text/css”>
Now, assume that we have a link with blue in color and we want “red” as its rollover color so we have to use this code,
<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:hover {
color:#FF0000;
}
</style>
</head>
Now, if you want to change the color of visited link then add these lines in the above code,
a:visited {
color:#336600;
}
this will change the color of visited link to green.
similarly if you want to show a background color on rollovering then simply add this code in a:hover area,
background-color:#0066FF;
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 show background color on rollover
so our final code will be,
<head>
<style type=”text/css”>
a:link {
color:#0000FF;
}
a:visited {
color:#336600;
}
a:hover {
color:#FF0000;
background-color:#0066FF;
}
</style>
</head>
now, in order to add underline on the link on rollover, then add this code in a:hover too
text-decoration:underline;
so the final code for the rollover link must be look 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>
you can also give other effects on the link like , text get bold on rollver, font size change on rollover, font style change on rollover by adding these lines in a:hover.
font-weight:bold;
font:Arial, Helvetica, sans-serif;
font-size:16px;
This is just a sample of what you can do using CSS, to learn more about CSS or to ask a question or request a tutorial then kindly contact me.
