Javascript 如何使用jQuery创建浮动div

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

如何使用jQuery实现这一点？

var-container=$（'#container'）；
变量区域=$（'.area'）；//这是一个
var位置=面积。偏移（）；
变量浮动=$（“”{
css:{“位置”：“绝对”，
“顶部”：位置。顶部-30，
“左”：位置左+20，
“边框”：“1px实心#000”，
“填充”：“5px”，
“显示”：“无”，
“z指数”：“100”，
“背景色”：“F00”
}
})
.text（'Hello World'）；//这是B
css（'position'，'relative'）；
容器。附加（浮动）；
函数show（）{
floating.show（）；
}
函数hide（）{
floating.hide（）；
}
区域。在（'mouseenter'，show）；
区域上（'鼠标移动'，隐藏）；
floating.on（'mouseenter'，函数（事件）{
log（“浮动：mouseenter”）；
区域关闭（“鼠标器”，显示）；
区域关闭（“鼠标移动”，隐藏）；
});
floating.on（'mouseleave'，函数（事件）{
log（“浮动：mouseleave”）；
区域。在（'mouseenter'，show）；
区域上（'鼠标移动'，隐藏）；
});

我的问题是每次鼠标进入B，B就消失了。我需要用jQuery来实现这一点，而不仅仅是CSS。

只需添加：

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

它在jsFiddle上工作

顺便说一下，我建议您不要使用“show”和“hide”作为函数名，因为它们已经存在于jQuery中。showTooltip和hideTooltip可以是好名字。

只需添加：

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

它在jsFiddle上工作

---

顺便说一下，我建议您不要使用“show”和“hide”作为函数名，因为它们已经存在于jQuery中。showTooltip和hideTooltip可以是好名字。

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

在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可能会很尴尬。

您遇到的主要问题是，绿色文本的mouseleave事件在浮动div的mouseenter之前触发。为了解决这个问题，我制作了一个变量来跟踪处于浮动状态的鼠标，并在hide（）中使用了一个setTimeout函数在100毫秒后检查此变量。如果担心延迟，可能会降低

在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可能会很尴尬。

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

只需在HTML中添加隐藏的浮点

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

jQuery将非常简单，如下所示：

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

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

---

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

只需在HTML中添加隐藏的浮点

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

jQuery将非常简单，如下所示：

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

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