保持jQuery`Appended`元素在悬停时打开 [英] Keep jQuery `Appended` Element Open When Hovering It

问题描述

已经答复了MYSELF（参见答案）

因此，从 jQuery` [jQuery创建的元素] .is（：hover）`只能在Chrome浏览器中运行。

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

我正在使用 .is（：hover）。这种方法在Chrome中工作正常，但没有其他浏览器。当我们发现（来自上面的链接）时，它前一段时间被删除了。

OLD：HOVER METHOD

  var 
 hov = $（< div class = \over \>我是（< div>结果：WAITING< / div>），
 
 $ b $（body）。追加（HOV）.append（盒）; $（'＃MeHover'）。on（'mouseleave'，function（）{
 var d = new Date（）; 
 box.text（Result： + hov.is（：hover）。toString（）。toUpperCase（））; 
}）; 
  

解决方案

在 mouseleave listener，如果 histed 或 hoverer 元素是元素， relatedTarget

var $ hovered = $（' ）; $（body）。append（$ hoverer）; $ hovered.add（$（#MeHover）; var $ hoverer = $（< div class = over>我在你< / div> hoverer）.mouseenter（function（）{$ hoverer.fadeIn（）;}）。mouseleave（function（e）{if（e.relatedTarget！= $ hoverer [0]& e.relatedTarget！= $ hovered [ 0]）$ hoverer.fadeOut（）;}）;

.over {display：none;位置：绝对; top：20px;左：0;正确：0;背景：green}

< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div id =MeHover>悬停在我身上< / div>

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

解决方案

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>

这篇关于保持jQuery`Appended`元素在悬停时打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！