0

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

我在 IE 和 FF 中都进行了测试，但 DIV 的播放效果并不好！基本上，它会无缘无故地关闭（无需移动鼠标）。有时它好像已经开始了悬停事件。我想轻弹是您可以使用的术语。

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

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"/>
4

2 回答 2

0

试试这个

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; 您也可以不使用 isShowing 变量来实现，方法是查看状态元素的样式属性中的显示。

于 2012-06-02T03:52:24.650 回答
0

您的问题是当 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);  
      });
  });
于 2012-06-02T04:06:05.277 回答