Question

I have two div’s, A and B. I would like to hover over DIV A and reveal DIV B, but I do not want DIV B to hide until the mouse moves from over DIV B.

<div id="a"><img src="images...." class="profile" id="options" /></div>
<div id="b"> //some information</div>

The jquery:

<script>
$(document).ready(function(){
$('#a').hover(function(){
$('#b').show();
},
function(){
$('#b').hide();
});
});

My CSS:

<style type="text/css">
<!--
.profile{ position: absolute; top: 0px; width: 20px; height: 20px;}
#id{ position: absolute; top: 20px; width: 300px; height: 400px;}
-->
</style>

I provided the css for explanation purpose. I was thinking of changing the class so that but DIV A and DIV B have the same class. This was not possible because my DIV B will become the size of a chatting image.

below is an image of what I am trying to describe:

can someone please explain where I am going wrong with my codes?

Answer 1

Try this:

$(document).ready(function(){

  $('#a').mouseenter(function(){
    $('#b').show();
  });

  $('#b').mouseleave(function(){
    $(this).hide();
  });

});