显示和隐藏 div 需要帮助

Question

我正在创建的图像查看器出现问题。如下图所示，“窗口”是显示图像的位置，“分页”是用户可以更改图像的位置。我使用这个 Jquery 脚本使“分页”在窗口悬停时淡入 - 它一开始是隐藏的。尽管当用户将鼠标悬停在“寻呼”上时，它会闪烁。 （比如显示然后隐藏等）

我想这是因为鼠标不再悬停在“窗口”上。谁能建议我如何让“寻呼”保持显示？感谢您的帮助！ :)

$(".window").hover(function() {
    $(".paging").fadeIn('fast');
}, function() {
    $(".paging").fadeOut('fast');
});

Answer 1

您可以在此处使用 .stop() 并将两者都包含在您的 .hover() 选择器，像这样：

$(".window, .paging").hover(function() {
    $(".paging").stop(true, true).fadeIn('fast');
}, function() {
    $(".paging").stop(true, true).fadeOut('fast');
});

这样，当你离开进入时子级或返回父级，它会停止淡出并将其带回，从而导致用户看不到任何可见操作。

Answer 2

您可以尝试使用 mouseover 和 mouseout 代替。我不确定 mouseout 的反应是否与 hover 的反应相同。

Answer 3

事实上，当您将鼠标移到分页上时，会发生一件神奇的事情，称为“事件冒泡”：“悬停”事件被传递到“悬停”事件的父容器。悬停”对象，依此类推，直到“文档”对象。

因此，要解决您的问题，您需要停止冒泡，您可以使用“return false”来做到这一点：（

$(".paging").hover(function() {
    return false;
}, function() {
    return false;
});

在最新版本的 jquery 中，您可能可以将参数 function(){return false;} 替换为 false 。）