Keep jQuery `Appended` Element Open When Hovering It

Question

ALREADY ANSWERED MYSELF (See Answers)

So leading on from jQuery `[jQuery created Element].is(“:hover”)` Only Seems To Work In Chrome .

A bit more background :
I was trying to maintain hover when we moved from an element already in the DOM to an element added by jQuery's .append() method.

I was using .is(":hover") . This method was working fine in Chrome but no other browsers. As we found out (from the link above) it removed some time ago.

OLD :HOVER METHOD

var 
    hov = $("<div class=\"over\">I'm Over You</div>"),
    box = $("<div>Result: WAITING</div>")


$("body").append(hov).append(box);

$("#MeHover").on('mouseleave', function(){
    var d = new Date();
    box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});

Answer 1

On the mouseleave listener, keep open if either the hovered or hoverer element are the relatedTarget

 var $hovered = $('#MeHover'); var $hoverer = $("<div class=over>I'm Over You</div>"); $("body").append($hoverer); $hovered.add($hoverer).mouseenter(function() { $hoverer.fadeIn(); }).mouseleave(function(e) { if (e.relatedTarget != $hoverer[0] && e.relatedTarget != $hovered[0]) $hoverer.fadeOut(); }); 

 .over { display: none; position: absolute; top: 20px; left: 0; right: 0; background: green } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="MeHover"> Hover Over Me </div> 

Answer 2

So I toyed with tracking the mouse and seeing if it was in the container, but it seemed too expensive and complex to implement. In the end, I decided to go for the .data() route as per the below.

I also have a fiddle demonstrating: https://jsfiddle.net/glenn2223/uk7e7rwe/

CODE

var 
    hov = $("<div class=\"over\">I'm Over You</div>"),
    box = $("<div>Result: WAITING</div>");

$("body").append(hov).append(box);

$("#MeHover").add(hov).mouseenter(function () {
  $("#MeHover").data("keepHover", 1);
  hov.fadeIn();
}).mouseleave(function () {
  $("#MeHover").removeData("keepHover");
  CloseHover();
});

function CloseHover(){
  clearTimeout(t);
  var t = setTimeout(function () {
      if ($("#MeHover").data("keepHover") != 1)
          hov.fadeOut();
  }, 300);
}