make the link color or background color change when mouse is moved over by using CSS.
using onMouseOver Effects in CSS very simple. to do this, just follow steps.
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*/
.onmouseover{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;
}
/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseover:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
Step 2:
Sets the text style you want the mouse over effects occurring
e.g:
This is the Mouse Over Text
Note: Here we set the style with the tag "class". The style name is "onmouseover" that was created in header portion
For the background color to change, simply add "background-color" property in style tags, as explained above.
e.g :
<head>
<style>
/*This is how the text will look before mouse over*/
.onmouseoverb{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;
}
/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseoverb:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
background-color:#009966;
}
</style>
</head>
This results in:
This is the Mouse Over Text
No comments:
Post a Comment