在hover它时保持jQuery`Abpended`元素打开

已经回答了自己的问题（见答案）

所以从jQuery引发`[jQuery created Element] .is（“：hover”）`似乎只能在Chrome中工作 。

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

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

旧：方法

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

Answer 1

在mouseleave侦听器上，如果hoverer或hoverer元素是hoverer ，请保持打开状态

 var $hovered = $('#MeHover'); var $hoverer = $("
I'm Over You
"); $("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 } 

  
 Hover Over Me  

Answer 2

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

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

码

 var hov = $("
I'm Over You
"), box = $("
Result: WAITING
"); $("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); }