Question

我有以下div：

<div class="red"></div>

当它悬停时，会动态创建一个按钮，并通过jQuery附加到body，鼠标离开时，该按钮将从body中删除。

var $button = $("<button>").html("Hover me");

$(".red").on("mouseenter", function () {

    var $bClone = $button.clone(),
        $this = $(this);

    $bClone.css({
        position: "absolute",
        left: $this.offset().left,
        top: $this.offset().top
    });

    $this.data("button", $bClone);

    $("body").append($bClone);
}).on("mouseleave", function () {

    var $this = $(this),
        $button = $this.data("button");

    if ($this.data("button")) {
        $button.remove();    
    }
});

问题在于，当我悬停.red悬停时出现的按钮时，该按钮会被删除。

我尝试使用:not(.red)作为on函数的第二个参数来解决问题，但它仍无效。

如何解决这个问题？

JSFIDDLE

Answer 1

在 mouseleave 事件中尝试此操作：

$('body').on("mouseleave", '.red, button', function (e) {

    var o = $(".red").offset();
    var w = $(".red").width();
    var h = $(".red").height();

    if ((e.pageX < o.left || e.pageX > o.left + w) ||
        (e.pageY < o.top || e.pageY > o.top + h)) {
        $("button").remove();
    }

});

仅当光标位置不在 .red div 中时，才会删除按钮。

这是jsfiddle：http://jsfiddle.net/caA5b/3/

Answer 2

看起来你的div仍然是空的。所以，而不是$（“body”）。append（$ bClone）;使用$（“。red”）。append（$ bClone）;希望这会有所帮助

Answer 3

我在你的小提琴中做了一些改变，所以我找到你想要的结果，所以我做了什么我删除绝对位置并将按钮放入div这样

var $button = $("<button>").html("Hover me");

$(".red, .red button").on("mouseenter", function () {

var $bClone = $button.clone(),
    $this = $(this);

$bClone.css({
    left: $this.offset().left,
    top: $this.offset().top
});

$this.data("button", $bClone);

$("body .red").append($bClone);
}).on("mouseleave", function () {

var $this = $(this),
    $button = $this.data("button");

if ($this.data("button")) {
    $button.remove();    
}
});

只需在你的小提琴中复制这段代码并查看结果

带有绝对定位元素的悬停问题

3 个答案: