如果鼠标在弹出窗口上，jquery mouseover不会隐藏元素

Question

我有几个元素，在每个元素上移动鼠标几秒钟后，就会出现弹出窗口。这是我通过以下脚本完成的

var timeOutUserInfo;
$('a[datatype=popupAboutUser]').live({
    mouseenter: function() {
        timeOutUserInfo = setTimeout(function(){
            $('#popupUserInfo').show();
        }, 1000);
        return false;
    },
    mouseleave: function (e) {
        clearTimeout(timeOutUserInfo);
        $('#popupUserInfo').fadeOut(250);
    }
});

问题是，如果用户应该在#popupUserInfo上移动鼠标，但只要他这样做，popup就会隐藏起来。我已经尝试了一些事情来检查鼠标是否在弹出窗口上，如果没有-隐藏它，但无法做到这一点。

对此有什么解决方案吗？

Answer 1

试试这个。。。

<style type="text/css">
a.showinfo{
display:inline-block;
position:relative;
}
div.popupUserInfo{
width:100px;
height:100px;
position:absolute;
right:-100px;
top:0;
display:none;
}
</style>
<a href="whatever.com" class="showinfo">
  <div class="popupUserInfo">some user info here</div>
</a>
<script type="text/javascript">
  $(document).ready(function(){
    $(".showinfo").hover(function(){
        $(this).children(".popupUserInfo").show();
      },function(){
        $(this).children(".popupUserInfo").hide();
    });
  });
</script>