如果鼠标位于弹出窗口上方,jquery mouseover 不会隐藏元素

发布于 2025-01-08 22:12:52 字数 560 浏览 0 评论 0原文

我的元素很少,通过在每个元素上移动鼠标,在鼠标在每个元素上花费几秒钟后,应该会出现弹出窗口。我通过以下脚本完成了这一点,

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 上,但只要他这样做,弹出窗口就会隐藏。 我尝试了一些方法来检查鼠标是否位于该弹出窗口上,如果没有,则隐藏它,但无法这样做。

有什么解决办法吗?

I have few elements and by moving the mouse on each of them, popup window should appear, after the mouse spend few second on each of them. This I have done by the following script

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

the problem is that if the user should move the mouse on the #popupUserInfo, but as far as he does it, popup hides.
I have try a few things with checking if the mouse is over that popup and if not - to hide it, but was not able to do so.

Are there any solutions for this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

鹿童谣 2025-01-15 22:12:52

试试这个...

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

Try this...

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文