在JQuery中检查鼠标是否悬停在多个元素上？

Question

我正在开发一个下拉菜单，遇到了问题…这是代码：

$('#layer2_cell1').hide();

$("#layer1_cell1").mouseenter(function () {
    $('#layer2_cell1').show();
    $("#storage").data('airplanesmain', '1');
});
$("#layer1_cell1").mouseleave(function () {
    $("#storage").data('airplanesmain', '0');
    var subcell = $("#storage").data('airplanessubcell');
    if (subcell == '0') {
        $('#layer2_cell1').hide();
    }
});
$("#layer2_cell1").mouseenter(function () {
    $("#storage").data('airplanessubcell', '1');
});
$("#layer2_cell1").mouseleave(function () {
    $("#storage").data('airplanessubcell', '0');
});

如果我的鼠标在 layer1_cell1 和 layer2_cell1 之外，我希望能隐藏 layer2_cell1。看起来下面的代码可以实现，但实际上不行。请帮忙解决！

- Allen Hundley

---

你能否在jsfiddle上发布所需的最小HTML、CSS和JS代码？这会非常有帮助。此外，你是否考虑过使用纯CSS下拉菜单？只是为了显示和隐藏，没有理由使用JS。 - TimCodes.NET

Js fiddle是http://jsfiddle.net/Q4f2N/2/。它在那里无法工作，但只需将所有代码上传到此文件系统中...category_application文件夹内，其中有category_application.html，这是HTML代码的位置...还有一个名为java的文件夹和一个名为css的文件夹。不用担心图片。在java文件夹内有Jquery.js和menu.js，menu.js包含Java代码。然后在css内有sheet.css，其中包含CSS。 - Allen Hundley

你把CSS放在JavaScript框里，反之亦然。现在更新了，可以查看--> http://jsfiddle.net/Q4f2N/3/ - Kyle Macey

你的代码远远超出了标准，我建议你像@Chimoo建议的那样，放弃现有的代码，从CSS下拉菜单的好教程重新开始。我以前从未见过有人使用JQUERY将FONT标签插入到TABLE中。 - Kyle Macey

Answer 1

你好，我在这里写了一个仅使用CSS的菜单http://jsfiddle.net/P8ZH6/3/，因此不需要使用JavaScript。

如果您需要将动态内容显示在菜单上方，则可以将JavaScript事件附加到菜单项。

类似以下代码可能会起作用。

$(document).ready(function(){

$(".menu li").hover(function(){
   $("#dynamic_content").html($(this).parents(".menu_1").find("span").html() + "->" + $(this).find("a").text());
})

$(".menu .menu_1 span").hover(function(){
   $("#dynamic_content").html($(this).html());
})

$(".menu li, .menu .menu_1 span").mouseout(function(){
   $("#dynamic_content").html("");
 });                                

});

希望这对您有所帮助。

- zenril