Hide Show Div on MouseOver and MouseOut

In this quick little jQuery demonstration I am going to show you how to hide and show a div element. This works by showing the div when the mouse is over the designated element, and then hides when the mouse has moved away from that same element.

<script type="text/javascript">
 $(document).ready(function () {
				     
//function that hides and shows the given div 
//when mouse on & off the page-object-area div
$("#hover_over_div_id").hover(
 function(){
  var id = $(this).data("id");
  if(id!==undefined){
  $("#" + id).show();   
 }
 $("#div_to_toggle_id").show();
},function(){
 $("#div_to_toggle_id").hide();
 $(".hidden").hide();
 });

});

</script>

Simply copy and paste that script between the page’s head tags and be good to go. Also be sure that jQuery is referenced in your head tag as well, otherwise this function will not work.

Leave a Comment

Your email address will not be published. Required fields are marked *