javascript - 悬停时保持 jQuery `Appended` 元素打开

Question

我自己已经回答了(参见答案)

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

Answer 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>