的MouseEnter功能显示按钮和图像在一个div，但徘徊在这些断裂鼠标离开功能

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"); 
}); 

我在这里设立了一个基本的演示：http://jsfiddle.net/jesseyuen/4FPfG/4/

Answer 1

由于按钮和用户图像不是零件＃object-bg，将它们悬停将导致鼠标离开事件的触发器

使用这个网站，而不是

<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> 

现在你可以便又的CSS重新定位他们在这里是Demo Fiddle

Answer 2

尝试下面的代码。

<div id="wrapper"> 
    <div id="object1"> 

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

    </div> 



    <div id="object-bg"> <a class="button" href="#" >Register</a></div> 

</div> 

更新小提琴：

http://jsfiddle.net/4FPfG/6/

感谢，

湿婆