Demo of hover event using JQuery

CSS

<style>
.msg{ 
position: absolute;
FONT-SIZE: 12px;
font-family: Verdana;
border-style: solid;
border-width: 1px;
border-color:red;
padding:10px;
width:350px;
height:50px;
 background-color: #f1f1f1;
display:inline;

}

</style>

HTML

<div id=d1 class='msg'>Hover over this box, to change color</div>

jquery

<script>
$(document).ready(function() {
///// Mouse over and Mouse out  /// 
$("#d1").hover(function(){
///////// mouse enter function ////
 $('#d1').css("background-color", "blue");
//////// mouse out function //////////
}, function(){
 $('#d1').css("background-color", "yellow");
});
////// Mouse over and Mouse out end /////
})
</script>