Question

点击链接后，我会弹出一个弹出窗口。这是我的弹出代码

<div class='' id="custom-popover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content" id="details-container">
    </div>
  </div>
</div>

我还在弹出show时使用jquery添加一些html代码。现在我想检查光标是否在此弹出窗口上，或者如果用户将鼠标悬停在此弹出窗口上，然后我显示警告消息，否则隐藏弹出窗口。我怎样才能做到这一点？我试过这样的事情

var isHovered = $('#custom-popover').is(":hover");
if (isHovered){
alert("msg"); 
} else {
 $('#custom-popover').hide();
 }

但这不起作用。我怎么能这样做？

Answer 1

使用全局变量：

var cursorOnDiv = false;

$(document).on({
        mouseenter:function(){ cursorOnDiv = true; },
        mouseleave:function(){ cursorOnDiv = false; },
    }, 
   '#yourDivId'
);

并检查他

Answer 2

有点像这样，

$( "#custom-popover" ).mouseover(function() {
     $('#custom-popover').hide();
});

根据{{3}}，函数is()在回调中通常很有用，例如事件处理程序。此函数只运行一次，因为它不是回调。因此，为了检测悬停事件，请使用回调。

如果你想进入和离开两者，你甚至可以这样，

$( "custom-popover" )
.mouseenter(function() {

})
.mouseleave(function() {

})

Answer 3

试一试：

$("#custom-popover").hover(
   function() {
       $("#custom-popover").show();
   },
   function() {
       $("#custom-popover").hide();
});

Answer 4

这就是你问的问题：

$("#custom-popover").hover(
   function() {
       alert("Hovering now");
       $("#custom-popover").show();
   },
   function() {
       $("#custom-popover").hide();
});

您存储了一个值，无论#custom-popover是否在执行时被悬停，您没有绑定eventListener（hover）以查找原因。

Answer 5

试试这个：

if($('#custom-popover:hover'))
{
       alert("msg");
}
else 
{
      $('#custom-popover').hide();
}

如何检查游标是否在div上

5 个答案: