Question

我正在使用jquery，以便当图像悬停时，会出现一个包含来自Ajax调用数据的弹出窗口。

我正在测试IE和FF并且DIV打得不好！基本上，它没有任何理由关闭（没有移动鼠标）。有时它似乎已经开始了hoveroff事件。我想轻弹是你可以使用的术语。

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

JS

  $(document).ready(function() {
  $(".hover").hover(
  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);
  },
  function() {
    setTimeout('$("#status").hide()',1500);  
  });
});

HTML

<img class="hover" title="Order Received" name="Order Received" src="https://site/_ref/images/cart.png" wsref="002731"/>

Answer 1

试试这个

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);  
});
});

隐藏make isShowing = false后;您还可以通过查看状态元素的style属性中的显示来使用isShowing变量来实现。

Answer 2

你的问题是当div打开时你正在徘徊在触发图像上。当鼠标在弹出窗口上时（因为弹出窗口不是触发器图像的子窗口），它在触发器本身上计为mouseOut。关闭弹出窗口。然后鼠标再次触发，使其重新打开。

$(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);  
      });
  });

jQuery popup div不能始终保持打开状态（轻弹）

2 个答案: