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

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 basic demo here: http://jsfiddle.net/jesseyuen/4fpfg/4/

as button , user image not part #object-bg, hovering them result in triggers of mouse leave event

use 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 can right css again re-positioning them here demo fiddle