Demo of hover event on multiple elements using JQuery

Hover over this box to Fade
Hover over this box to Fade




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 Fade</div>
  <div id=d2 class='msg'>Hover over this box to Fade</div>

jquery


<script>
$(document).ready(function() {
 $("#d1,#d2").hover(function(){$(this).fadeTo('fast', 0.3);}, function(){$(this).fadeTo('fast', 1.0);});
})
</script>