Mouseenter function displays buttons and images over a div but hovering on these breaks mouseleave function

Question

HTML

<div id="wrapper">

<div id="object1">
    <img src="https://dl.dropboxusercontent.com/u/682110/person1.png" width="100" height="100" />        
</div>  

<a class="button" href="#" >Register</a>

<div id="object-bg"></div>

</div>

JS

$("#object-bg").mouseenter(function () {
  $("#object1").delay(100).fadeIn(100);
  $(".button").delay(500).fadeIn(100);
});

$("#object-bg").mouseleave(function () {
  $("#object1, .button").css("display", "none");
});

I have set up a basic demo here: http://jsfiddle.net/jesseyuen/4FPfG/4/

Answer 1

As the button and user image is not the part #object-bg, hovering them will result in triggers of mouse leave event

use this html instead

<div id="wrapper">
 <div id="object-bg">
  <div id="object1">  
    <img src="https://dl.dropboxusercontent.com/u/682110/person1.png" width="100" height="100" />
  </div>    
  <a class="button" href="#" >Register</a>       
 </div>
</div>

now you can right the css again for re-positioning them here is the Demo Fiddle