Javascript 悬停时在不同div上显示子菜单

您好，请看下面的html

$（文档）.ready（函数（）{
美元（“.sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.addClass（“show”）；
}
});
美元（“.no sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.removeClass（“show”）；
}
});
});
.second.menu{
显示：无；
边缘顶部：5px；
}
.表演{
显示：块！重要；
宽度：100%！重要；
溢出：隐藏；
背景：小麦；
填充物：5px；
}
李国荣先生{
浮动：左；
最小宽度：80px；
边框：1px纯红；
右边距：1px；
溢出：隐藏；
文本对齐：居中；
列表样式：无；
光标：指针；
}


主页
颜色列表
类型列表
类型


绿色的
蓝色的
红色的

您应该将
.mouseleave（）
附加到新的事件处理程序，以便离开子菜单本身。另外，尝试使用
.hide（）
和
.show（）



$（文档）.ready（函数（）{
美元（“.sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.show（）；
}
});
//添加此事件处理程序
美元（“.second”）。在({
mouseleave：函数（事件）{
$（“.second.menu”）.hide（）；
}
});
美元（“.no sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.hide（）；
}
});
});
.second.menu{
显示：无；
边缘顶部：5px；
}
.表演{
显示：块！重要；
宽度：100%！重要；
溢出：隐藏；
背景：小麦；
填充物：5px；
}
李国荣先生{
浮动：左；
最小宽度：80px；
边框：1px纯红；
右边距：1px；
溢出：隐藏；
文本对齐：居中；
列表样式：无；
光标：指针；
}


主页
颜色列表
类型列表
类型


绿色的
蓝色的
红色的

只需在子类上使用mouseleave，如下所示：

$(document).ready(function() {
    $(".sub").on({
        mouseenter: function (event) {
            $(".second.menu").addClass("show");
        }
    });
    $(".sub").on({
        mouseleave: function (event) {
            $(".second.menu").removeClass("show");
        }
    });
});

使用
MouseLeave
退出第二个菜单


$（文档）.ready（函数（）{
美元（“.sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.addClass（“show”）；
}
});
$（“.second.menu”）。打开({
mouseleave：函数（事件）{
$（“.second.menu”）.removeClass（“show”）；
}
});
美元（“.no sub”）。在({
鼠标指针：函数（事件）{
$（“.second.menu”）.removeClass（“show”）；
}
});
});
.second.menu{
显示：无；
边缘顶部：5px；
}
.表演{
显示：块！重要；
宽度：100%！重要；
溢出：隐藏；
背景：小麦；
填充物：5px；
}
李国荣先生{
浮动：左；
最小宽度：80px；
边框：1px纯红；
右边距：1px；
溢出：隐藏；
文本对齐：居中；
列表样式：无；
光标：指针；
}


主页
颜色列表
类型列表
类型


绿色的
蓝色的
红色的

这可以通过这样简单的设置在所有CSS中完成。但要回答您的问题，您需要使用mouseleave事件。请您写下css，然后您可以简单地使用纯css创建它。旁注：当设备通过触摸屏（手机、平板电脑、手表、冰箱）控制时，操纵“mouseenter”和“mouseleave”等事件是非常困难的。这是可行的，但它也有一个意外的副作用，即在您尝试将菜单悬停时隐藏它。基本上，不允许用户点击任何子菜单链接。我的荣幸。请参阅此链接以了解建议。大多数示例都是HTML、CSS和JQuery以及可用的源代码。我认为这对你的学习很有用。