Question

这可能是我遇到的一个简单问题，但对于我的生活，我似乎无法弄明白。如果你们中的任何人能够帮助我，我会非常感激。

当用户将鼠标悬停在某个div上时，我正在使用JQuery来显示菜单。菜单将显示在div的左上角。我得到了这个工作，但当我尝试点击出现的div的菜单项时，div再次消失，因为鼠标在技术上不在div上，而是在菜单上。

在下面的示例中，“＃blockMenu”是动态显示的菜单。我将当前的div（$ this）淡出一点，以强调菜单。

我使用以下代码来实现这一目标：

$("div.editable").hover(function () {
    $(this).fadeTo(500, 0.25);
    $('#Menu').css("position", "absolute");
    $("#Menu").css("top", $(this).offset().top);
    $("#Menu").css("left", $(this).offset().left);
    $("#Menu").css("zIndex", "10000");
    $('#Menu').show();
 }, function (e) { // on mouseout
    $(this).fadeTo(500, 1);
    $("#Menu").hide();
 });

我希望菜单在光标离开div时消失，而当光标在菜单上时div保持淡出。当光标同时离开菜单和div时，div应该淡入并且菜单应该消失。

有没有人知道如何编辑我的代码才能使其正常工作？

非常感谢您给我的任何帮助。

Answer 1

只需使用:hover伪类，这可能有助于这种情况。你将失去动画效果，但它可以确保简化，并从图片中取出javascript

Answer 2

为菜单添加悬停功能，并在鼠标悬停在菜单上时设置一些状态，如果鼠标不在div上而不在菜单上，则只关闭菜单。

鼠标悬停时自动显示div

2 个答案: