CSS onMouseOver Effects
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.
Explanation
Property :
onMouseOver EffectsText Effects:
Example:
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:<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>
Set the style to the text for which you want the mouse over effect to happen
Result:
<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.
Example 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;
}
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
Result:
<a href="" class="colc2"> This is the On MouseOver Effect </a>
