Question

我有一个DIV在图像悬停时打开。当用户离开图像时，div会在超时后消失。如果用户将鼠标悬停在DIV上，我怎样才能使DIV保持活动状态？那么只要用户在图像上或DIV本身上，DIV就会保持活动状态？

我使用以下内容：

$(document).ready(function() {
  $(".hover").hover(
  function(e){
    if ( $("#status").is(":hidden")) {
      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() {
    if ( $("#status").is(':visible')) {
      setTimeout('$("#status").hide()',0);
    }  
  });
});

HTML

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

Answer 1

试试这个，这将在div悬停时清除超时：

$(document).ready(function() {
    var myTimeOut;
    $(".hover, #status").hover(
        function(e){
            if ( $("#status").is(":hidden")) {
                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);
            }
            else {
                //clear timeout if div is hovered
                clearTimeout(myTimeOut);
            }
        },
        function() {
            if ( $("#status").is(':visible')) {
                myTimeOut = setTimeout('$("#status").hide()',0);
            }  
    });
});

jQuery悬停DIV-如果它们悬停在DIV本身上，则保持活动状态

1 个答案: