jquery - jQuery鼠标输入

Question

编辑

我遇到的问题是叠加层的 z-index 比“.bar”元素高。感谢@nnnnnn 指出显而易见的事情！

在我正在创建的网站上，我希望覆盖在用户将鼠标悬停在元素上时淡入，并在他们离开元素时淡出。

到目前为止我使用的代码是：

$(".bar").mouseenter(function() {
$('#overlay_hover').fadeIn('slow');
})

$(".bar").mouseleave(function() {
$('#overlay_hover').fadeOut('slow');
})

这适用于 fadeIn 叠加，但是当我将第二段代码添加到 fadeOut 时，当您将鼠标悬停在“.bar”上时，叠加会反复淡入和淡出。我确信这很简单，但我刚刚开始使用 jQuery，非常感谢任何帮助或指导！

Answer 1

你可以使用 .stop()

例如

$('#overlay_hover').stop().fadeOut('slow');

jQuery 参考http://api.jquery.com/stop/

也看看这里 Jquery Stop Fadein / Fadeout

Answer 2

或者你可以尝试使用，

$(".bar").on("mouseenter", "div", function(){
    $('#overlay_hover').fadeIn('slow');
}).on("mouseleave", "div", function(){
    $('#overlay_hover').fadeOut('slow');
});