Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/myscript/public_html/classes/classdb.php on line 42
onMouseOver Effects, hover using style sheet - CSS (HTML) Tutorial

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 Effects

Text 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:
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;
}

set this style to the html tag

Result:


<a href="" class="colc2"> This is the On MouseOver Effect </a>

Ask Questions

Ask Question