jQuery弹出div没有保持一致的打开状态（轻弹）

我正在使用jquery，因此当图像悬停在上方时，会出现一个弹出div，其中包含来自Ajax调用的数据

我正在测试IE和FF，而DIV的表现并不好！基本上，它是无缘无故关闭的（不移动鼠标）。有时，它似乎已经开始了霍华德事件。 我想你可以用flicking这个词

我看过谷歌，但找不到任何相关信息。有人知道为什么会这样吗？我的代码如下：

JS

$（文档）.ready（函数（）{
$（“.hover”）.hover(
职能（e）{
var ref=$（this.attr（“wsref”）；
变量url=”https://site/_ref/shop/_base/order_status.php?action=getstatus&ref=“+ref+”&sid=“+Math.random（）”；
$（“#状态”）.show（）；
变量高度=$（“.status”）.height（）；
变量宽度=$（“.status”）.width（）；
leftVal=e.pageX-宽度-10+“px”；
topVal=e.pageY-高度-10+“px”；
$（“#status”）.css（{left:leftVal，top:topVal}）；
$（“#status”）.html（“”）.load（url）；
},
函数（）{
setTimeout（“$”（“#status”）.hide（）”，1500）；
});
});

HTML

试试这个

var isShowing;
isShowing=false;
$(document).ready(function() {
$(".hover").hover(
function(e){
if(!isShowing)
{
    var ref = $(this).attr("wsref");
   var url = "https://site/_ref/shop/_base/order_status.php?action=getstatus&    ref="+ref+"&sid="+Math.random();
    $("#status").show();
    var height = $(".status").height();
    var width = $(".status").width();
    $("#status").html("<div id='loading'></div>").load(url);
    isShowing=true;
}
leftVal = e.pageX - width -10 + "px";
topVal = e.pageY - height -10 + "px";
$("#status").css({left:leftVal,top:topVal});

},
function() {
setTimeout('$("#status").hide();',1500);  
});
});

var显示；
isShowing=假；
$（文档）.ready（函数（）{
$（“.hover”）.hover(
职能（e）{
如果（！isShowing）
{
var ref=$（this.attr（“wsref”）；
变量url=”https://site/_ref/shop/_base/order_status.php?action=getstatus&    ref=“+ref+”&sid=“+Math.random（）；
$（“#状态”）.show（）；
变量高度=$（“.status”）.height（）；
变量宽度=$（“.status”）.width（）；
$（“#status”）.html（“”）.load（url）；
isShowing=true；
}
leftVal=e.pageX-宽度-10+“px”；
topVal=e.pageY-高度-10+“px”；
$（“#status”）.css（{left:leftVal，top:topVal}）；
},
函数（）{
setTimeout（“$”（“#status”）.hide（）；”，1500）；
});
});

---

隐藏后，使isShowing=false；您还可以通过查看status元素的display in style属性来使用isShowing变量来实现out。

您的问题是，当div打开时，您将鼠标悬停在触发器图像之外。当鼠标位于弹出窗口上时（因为弹出窗口不是触发器图像的子对象），它将在触发器上算作鼠标出。通过关闭弹出窗口，您将看到。然后鼠标再次移动到触发器上，使其重新打开

$(document).ready(function() {
  $(".hover").mouseover(function(e){
        var ref = $(this).attr("wsref");
        var url = "https://site/_ref/shop/_base/order_status.php?action=getstatus&ref="+ref+"&sid="+Math.random();
        $("#status").show();
        var height = $(".status").height();
        var width = $(".status").width();
        leftVal = e.pageX - width -10 + "px";
        topVal = e.pageY - height -10 + "px";
        $("#status").css({left:leftVal,top:topVal});
        $("#status").html("<div id='loading'></div>").load(url);
      });
    $("#status").mouseout(function() {
        setTimeout('$("#status").hide()',1500);  
      });
  });

$（文档）.ready（函数（）{
$（“.hover”）.mouseover（函数（e）{
var ref=$（this.attr（“wsref”）；
变量url=”https://site/_ref/shop/_base/order_status.php?action=getstatus&ref=“+ref+”&sid=“+Math.random（）”；
$（“#状态”）.show（）；
变量高度=$（“.status”）.height（）；
变量宽度=$（“.status”）.width（）；
leftVal=e.pageX-宽度-10+“px”；
topVal=e.pageY-高度-10+“px”；
$（“#status”）.css（{left:leftVal，top:topVal}）；
$（“#status”）.html（“”）.load（url）；
});
$（“#状态”）.mouseout（函数（）{
setTimeout（“$”（“#status”）.hide（）”，1500）；
});
});

您正在显示悬停时的div事件。所以最终它会闪烁。如果已在悬停事件中显示，则应添加If条件以返回（不再显示）。抱歉，我不太明白-您是说我需要添加If语句以仅在不可见时显示它，并在可见时隐藏它？

var isShowing;
isShowing=false;
$(document).ready(function() {
$(".hover").hover(
function(e){
if(!isShowing)
{
    var ref = $(this).attr("wsref");
   var url = "https://site/_ref/shop/_base/order_status.php?action=getstatus&    ref="+ref+"&sid="+Math.random();
    $("#status").show();
    var height = $(".status").height();
    var width = $(".status").width();
    $("#status").html("<div id='loading'></div>").load(url);
    isShowing=true;
}
leftVal = e.pageX - width -10 + "px";
topVal = e.pageY - height -10 + "px";
$("#status").css({left:leftVal,top:topVal});

},
function() {
setTimeout('$("#status").hide();',1500);  
});
});

$(document).ready(function() {
  $(".hover").mouseover(function(e){
        var ref = $(this).attr("wsref");
        var url = "https://site/_ref/shop/_base/order_status.php?action=getstatus&ref="+ref+"&sid="+Math.random();
        $("#status").show();
        var height = $(".status").height();
        var width = $(".status").width();
        leftVal = e.pageX - width -10 + "px";
        topVal = e.pageY - height -10 + "px";
        $("#status").css({left:leftVal,top:topVal});
        $("#status").html("<div id='loading'></div>").load(url);
      });
    $("#status").mouseout(function() {
        setTimeout('$("#status").hide()',1500);  
      });
  });