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

score 1 · Accepted Answer · answered Sep 21 '17 at 15:09

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>

Just, wow. The `relatedTarget` event target. **MIND == BLOWN**. You see, this is why I love StackOverflow. You think you have it down and then someone just blows you out the water with something you didn't know about. Intelligence +1. — glenn223, Sep 22 '17 at 08:03

score 0 · Answer 2 · answered Sep 21 '17 at 14:47

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

Keep jQuery `Appended` Element Open When Hovering It

ALREADY ANSWERED MYSELF (See Answers)

2 Answers2

Linked