Property: onMouseOver Effects
Text Effects:
e.g:hioxindia.com
Its very simple to do this. Just follow the steps and you can do it.
Step 1:
In head portion add style that you want the text to change, as follows
<head>
<style>
/*This is how the text will look before mouse over*/
.colc{
font-family: san-serif;
color: #9EFF36;
}
/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>
Step 2:
Set the style to the text for which you want the mouse over effect to happen
e.g:
<a href="" class="colc">
This is the Mouse Over Text </a>
Note: Here we set the style with the tag "class". The style name is "colc" that was created in header portion
-----------------------------
To make the background color to change, just add "background-color" property in style tags as explained above.
E.g: Form the style as
.colc2{
font-family: san-serif;
color: #9EFF36;
}
/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.colc2:hover
{
background-color: #245250;
}
set this style to the html tag
<a href="" class="colc2">
This is the On MouseOver Effect </a>
|