Question

I have a DIV that opens up when an image is hovered.
When the user leaves the image, the div disappears after a timeout.
How can I make it so that the DIV will stay active if the user was to hover over the DIV itself?
So the DIV will stay active as long as the user is on the image or the DIV itself?

I am using the following:

$(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

Try this, this will clear the timout when div is hovered:

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