Javascript mouseleave（）事件仅对一个元素无效

我对Jquery（以及JavaScript）还不熟悉，我一直在尝试制作一个侧栏，将鼠标悬停在图标上可以显示各自的div元素（“侧栏”，如果您愿意的话）

我希望它的行为能够使每当你将鼠标移出导航栏和侧栏（#链接，#更新），它们都会从视图中消失（我正在使用动画方法并将不透明度设置为0）。这适用于#更新，但不适用于#links元素

我想知道这是否是因为我如何编写代码，#links的mouseleave事件不起作用？除此之外，一切正常

我有一个代码笔，用于我正在进行的工作：

$（“.quicklinks”）.hover（函数（）{
$（“#链接”）.animate（{'opacity'：1}，300）；
}),
$（“#链接”）.mouseout（函数（）{
$（this.animate（{'opacity'：0}，300）；
}),
$（“.announcements”）.hover（函数（）{
$（“#更新”）.animate（{'opacity'：1}，300）；
}),
$（“#更新”）.mouseleave（函数（）{
$（this.animate（{'opacity'：0}，300）；
}),
$（“.announcements”）.hover（函数（）{
$（“#链接”）.animate（{'opacity'：0}，300）；
}),
$（“.quicklinks”）.hover（函数（）{
$（“#更新”）.animate（{'opacity'：0}，300）；
}),
$（“#导航”）.hover（函数（）{
$（“#链接”）.stop（）.animate（{'opacity'：0}，300），
$（“#更新”）.stop（）.animate（{'opacity'：0}，300）
});
@导入url（'https://fonts.googleapis.com/css?family=Karla:400，400i，700700i |工作+Sans:400600'）；
正文{背景色：#ccc；字体系列：Arial；}
#导航{背景色：#fff；宽度：50px；高度：100%；位置：固定；顶部：0；左侧：0；z索引：9999；}
.homebutton、.quicklinks、.Announces{宽度：50px；位置：固定；z索引：9999；边框底部：1px实心#fff；填充：17px 0px；字体大小：11px；文本对齐：中心；背景色：#fff；边框底部：1px虚线#b5b8c0；颜色：#3f4f79；}
.homebutton{顶部：0；左侧：0；}
.quicklinks{top:50px；left:0；}
.announces{顶部：100px；左侧：0；边框底部：0px实心；}
.quicklinks:hover、.announcements:hover{color:#b5b8c0；}
#链接，#更新{位置：固定；高度：100%；顶部：0；左侧：50px；索引：99；背景色：rgba（10,10,10,0.85）；宽度：180px；颜色：#fff；填充：30px；不透明度：0；}
#链接h1，#更新h1{字体系列：'Work Sans'；字体大小：9px；字体重量：400；文本转换：大写；字母间距：1px；填充：5px；背景色：#5c6274；显示：内联块；页边距底部：10px；}
.navlinks a{显示：块；填充：4px 0px；字体系列：'Work Sans'；字体大小：9px；字体重量：400；文本转换：大写；字母间距：1px；文本装饰：无；颜色：#86898c；转换：所有0.4s；}
.navlinks a b{右边距：8px；字体重量：600；颜色：#5c6274；}
#更新p{空白：行前；字体大小：10px；颜色：#9a；字体系列：“无边框”；页边距底部：20px；行高：130%；文本对齐：左；}
#更新页面{color:#5c6274；右边距：4px；}

快速链接

更新
2006年11月12日，奥雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献祭者。在乌兰姆科帕，在尼西，在尼西，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前，在门前。同侧枕侧悬吊

10月31日同侧悬吊术、法雷特拉悬吊术、心脏悬吊术等。我们的调味品是尼布和乌鸦。Nullam cursus libero rhoncus lorem auctor，位于molestie ex cursus。第二天晚上，我们将在第二天早上起床
2018年9月，埃涅亚港口码头。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。这是一个非常重要的问题，因为它是一个非常重要的问题。Etiam odio lacus、maximus non lobortis ac、调味品id magna

这可能很难捕捉到，但元素在浏览器的眼睛中仍然可见，因此您的
#updates
会阻止所有鼠标事件，因为它在z轴上的位置较高。尝试使用
.fadeIn
和
.fadeOut
而不是
.animate
。
fade
功能将元素设置为
display:none在动画之后，因此任何元素都不会扰乱鼠标事件

此外，您的div应该设置为
display:none而不是
不透明度：0

请注意，我对您的JS进行了各种更改，使其工作得更好。


$（“#链接”）.mouseleave（函数（）{
美元（本）。淡出（300）；
});
$（“#更新”）.mouseleave（函数（）{
美元（本）。淡出（300）；
});
$（“.announcements”）.mouseenter（函数（）{
美元（“#链接”）。淡出（300）；
$（“#更新”）.fadeIn（300）；
});
$（“.quicklinks”）.mouseenter（函数（）{
美元（“#更新”）。淡出（300）；
$（“#链接”）。法代因（300）；
});
@导入url（'https://fonts.googleapis.com/css?family=Karla:400，400i，700700i |工作+Sans:400600'）；
正文{背景色：#ccc；字体系列：Arial；}
#导航{背景色：#fff；宽度：50px；高度：100%；位置：固定；顶部：0；左侧：0；z索引：9999；}
.homebutton、.quicklinks、.Announces{宽度：50px；位置：固定；z索引：9999；边框底部：1px实心#fff；填充：17px 0px；字体大小：11px；文本对齐：中心；背景色：#fff；边框底部：1px虚线#b5b8c0；颜色：#3f4f79；}
.homebutton{顶部：0；左侧：0；}
.quicklinks{top:50px；left:0；}
.announces{顶部：100px；左侧：0；边框底部：0px实心；}
.quicklinks:hover、.announcements:hover{color:#b5b8c0；}
#链接，#更新{位置：固定；高度：100%；顶部：0；左侧：50px；索引：99；背景色：rgba（10,10,10,0.85）；宽度：180px；颜色：#fff；填充：30px；显示：无；}
#链接h1，#更新h1{字体系列：'Work Sans'；字体大小：9px；字体重量：400；文本转换：大写；字母间距：1px；填充：5px；背景色：#5c6274；显示：内联块；m