Question

当鼠标位于某个类的元素A上时，应该出现另一个包含链接的浮动div B.一旦鼠标离开A和B，B就会消失。

如何使用jQuery执行此操作？ jsFiddle

var container = $('#container');
var area = $('.area'); // this is A
var position = area.offset();

var floating = $("<div />", {
        css : { "position"  :   "absolute",
                "top"       :   position.top - 30,
                "left"      :   position.left + 20,
                "border"    :   "1px solid #000",
                "padding"   :   "5px",
                "display"   :   "none",
                "z-index"   :   "100",
                "background-color"  :   "#F00"
        }
    })
        .text('Hello World'); // this is B

    container.css('position', 'relative');
    container.append(floating);

    function show() {
        floating.show();
    }

    function hide() {
        floating.hide();
    }

    area.on('mouseenter', show);
    area.on('mouseleave', hide);
    floating.on('mouseenter', function(event) {
        console.log("floating: mouseenter");
        area.off('mouseenter', show);
        area.off('mouseleave', hide);
    });
    floating.on('mouseleave', function(event) {
        console.log("floating: mouseleave");
        area.on('mouseenter', show);
        area.on('mouseleave', hide);
    });

我的问题是，当鼠标进入B时，B已经消失。我需要使用jQuery，而不仅仅是CSS。

Answer 1

我不确定为什么你必须将浮动div放在jQuery中。这可能就是我如何实现类似于你想要的东西。

http://jsfiddle.net/A2gFb/6/

将隐藏的浮点数放在HTML中，

<div class="area">luptatum zzril
    <div class="fixed">Hello World!</div>
</div>

使用适当的CSS设置。

.area {
    position: relative;
    color: #0F0;
    font-weight: bold;
    /* you may want to set the width/height here as well*/
}

.fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;  /* Thanks Diego for pointing out the typo here */
    background-color: red;
    display: none;
}

jQuery就像这样简单：

$(".area").mouseenter( function() {
    $(".fixed").show();
});

$(".area").mouseleave( function() {
    $(".fixed").hide();
});

Answer 2

您遇到的主要问题是绿色文本的mouseleave事件在您的浮动div的mouseenter之前触发。为了解决这个问题，我创建了一个变量来跟踪浮动中的鼠标，并在hide（）函数中使用setTimeout在100 ms后检查此变量。如果你担心延迟，你可能会降低。 Here's the fiddle.

在javascript顶部：

var inFloat = false;

hide（）函数变为：

function hide() {
    setTimeout(function(){
        if (!inFloat)
            floating.hide();
    },100);
}

您的浮动鼠标事件将变为：

floating.on('mouseenter', function(event) {
    inFloat = true;
});
floating.on('mouseleave', function(event) {
    inFloat = false;
    floating.hide();
});

你仍然遇到浮动div具有与鼠标位置无关的固定位置的问题，因此将鼠标悬停在链接上然后有时移动到浮动div可能会很尴尬。

Answer 3

只需添加：

floating.on('mouseenter', show);
floating.on('mouseleave', hide);

它适用于jsFiddle。

顺便说一句，我建议你不要使用＆＃34; show＆＃34;并且＆＃34;隐藏＆＃34;作为函数名，因为它们已经存在于jQuery中。 showTooltip和hideTooltip可以是好名字。

如何使用jQuery创建浮动div

3 个答案: