jquery - Mouseenter 函数在 div 上显示按钮和图像，但悬停在这些中断处 mouseleave 函数

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的一部分，因此将它们悬停将导致鼠标离开事件的触发

改用这个 html

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

谢谢，

湿婆