悬停时保持 jQuery `Appended` 元素打开答案

【问题标题】：Keep jQuery `Appended` Element Open When Hovering It悬停时保持 jQuery `Appended` 元素打开
【发布时间】：2017-09-21 14:47:39
【问题描述】：

我已经回答了（见答案）

所以从jQuery `[jQuery created Element].is(“:hover”)` Only Seems To Work In Chrome开始。

更多背景知识：
当我们从 DOM 中已有的元素移动到由 jQuery 的 .append() 方法添加的元素时，我试图保持悬停。

我使用的是.is(":hover")。这种方法在 Chrome 中运行良好，但在其他浏览器中没有。正如我们发现的那样（从上面的链接）它在一段时间前被删除了。

旧：悬停方法

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

【问题讨论】：

标签： javascript jquery hover

【解决方案1】：

在mouseleave 侦听器上，如果hovered 或hoverer 元素是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>

【讨论】：

只是，哇。 relatedTarget 事件目标。 头脑 == 崩溃。你看，这就是我喜欢 StackOverflow 的原因。你认为你已经把它搞砸了，然后有人用你不知道的东西把你吹得水泄不通。智力 +1。

【解决方案2】：

所以我玩弄了跟踪鼠标并查看它是否在容器中，但实施起来似乎过于昂贵和复杂。最后，我决定按照下面的方法走.data() 路线。

我还有一个小提琴演示：https://jsfiddle.net/glenn2223/uk7e7rwe/

代码

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

【讨论】：