onMouseOver Effects, hover using style sheet

Topic

How to Make onMouseover Effects using CSS?
How to make the link color or background color change when mouse is moved over?
Set "hover" using style sheet.

Topic

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>

CSS onMouseOver Effects