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上移动鼠标，但就其而言，弹出窗口会隐藏。我已经尝试了一些事情，检查鼠标是否在弹出窗口上，如果没有 - 隐藏它，但是无法这样做。

对此有什么解决方案吗？

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>

如果鼠标位于弹出窗口上，则jquery mouseover不隐藏元素

1 个答案: