Its need of hover method of the Jquery when some times we need to give special animation and we can not write the particular CSS for the dynamic content which we can not know exactly its name. We can do it very short of method of Jquery hover by writing some line of code.
I know it can be easily done by the css but some time we required when we need to apply more then items which rendered using external iframe and at that time this can be very useful to apply the hover method after the complete page load to get the actual result.
First of we can do the hover method in two ways. First one is to use the CSS method and another is using he Java Script or JQuery method. In this articles we will see a simple tutorial to learn how we can change the background color of any control with just using its class name in Jquery hover method.
<html>
<head>
<title>the title</title>
<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script><style>
.hoverdiv{border:2px solid #666;
width:300px;
height:150;
display:block;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;}
</style>
</head>
<body><div class=”hoverdiv” style=”background-color:grey;”>
<h2>Background will change when Mouse over and out. </h2>
</div><script type=”text/javascript” language=”javascript”>
$(document).ready(function() {$(‘.hoverdiv’).hover(
function () {
$(this).css({“background-color”:”lightgrey”});
},
function () {
$(this).css({“background-color”:”grey”});
}
);});
</script>
</body>
</html>
