Question

ALREADY ANSWERED MYSELF（见答案）

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

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

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

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

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

Answer 2

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

我还有一个小提琴演示：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);
}

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

ALREADY ANSWERED MYSELF（见答案）

2 个答案: