mouseleave（）事件不仅仅适用于一个元素

Question

我是Jquery的新手（以及JavaScript的新手），我一直试图制作一个侧边栏，悬停在图标上会显示各自的div元素（＆＃34;侧栏＆＃34;如果你愿意的话。

我希望它的行为使得无论何时鼠标离开#nav和侧边栏（#links，＃update），它们都会从视图中消失（我使用animate方法并将不透明度设置为0）。这适用于#updates，但不适用于#links元素......

我想知道是不是因为我编写了代码，#links的mouseleave事件无法正常工作？除此之外，一切都有效。

我有一个CodePen，用于我在这里工作的内容：https://codepen.io/fleche/pen/qVNzMG

＆＃13;

＆＃13;

$(".quicklinks").hover(function() {
         $("#links").animate({'opacity': 1}, 300);
}),
  
$("#links").mouseout(function(){
    $(this).animate({'opacity': 0}, 300);
}),

$(".announcements").hover(function() {
         $("#updates").animate({'opacity': 1}, 300);
}),
  
$("#updates").mouseleave(function(){
    $(this).animate({'opacity': 0}, 300);
}),

$(".announcements").hover(function() {
         $("#links").animate({'opacity': 0}, 300);
}),

$(".quicklinks").hover(function() {
         $("#updates").animate({'opacity': 0}, 300);
}),

$("#nav").hover(function() {
  $("#links").stop().animate({'opacity': 0}, 300),
  $("#updates").stop().animate({'opacity': 0}, 300)
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Work+Sans:400,600');

body { background-color: #ccc; font-family: Arial; }

#nav { background-color: #fff; width: 50px; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; }

.homebutton, .quicklinks, .announcements { width: 50px; position: fixed; z-index: 9999; border-bottom: 1px solid #fff; padding: 17px 0px; font-size:11px; text-align:center; background-color: #fff; border-bottom: 1px dotted #b5b8c0; color: #3f4f79; }

.homebutton { top: 0; left: 0; }
.quicklinks { top: 50px; left: 0; }
.announcements { top: 100px; left: 0; border-bottom: 0px solid; }

.quicklinks:hover, .announcements:hover { color: #b5b8c0; }

#links, #updates { position: fixed; height: 100%; top: 0; left: 50px; index: 99; background-color: rgba(10,10,10,0.85); width: 180px; color: #fff; padding: 30px; opacity: 0; }

#links h1, #updates h1 { font-family: 'Work Sans'; font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; padding: 5px; background-color: #5c6274; display: inline-block; margin-bottom: 10px; }

.navlinks a { display: block; padding: 4px 0px; font-family: 'Work Sans'; font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #86898c; transition: all ease 0.4s; }

.navlinks a b { margin-right: 8px; font-weight: 600; color: #5c6274; }

#updates p { white-space: pre-line; font-size: 10px; color: #9a9a9a; font-family: 'Work Sans'; margin-bottom: 20px; line-height: 130%; text-align: left; }

#updates p b { color: #5c6274; margin-right: 4px; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
</div>
 
  <div class="homebutton"><i class="fa fa-home" aria-hidden="true"></i></div>
  
  <div class="quicklinks"><i class="fa fa-bars" aria-hidden="true"></i></div>

<div class="announcements"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
  
<div id="links">
  <h1>QUICK LINKS</h1><br>
  <div class="navlinks">
    <a href="#"><b>01</b> LINK</a>
    <a href="#"><b>02</b> LINK</a>
    <a href="#"><b>03</b> LINK</a>
    <a href="#"><b>04</b> LINK</a>
    <a href="#"><b>05</b> LINK</a>
  </div>
</div>

<div id="updates"><h1>updates</h1>
  <p><b>NOV/06</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta, velit et hendrerit tincidunt, metus erat tempus ante, in ullamcorper quam nisi in nisi. Suspendisse sed pulvinar ipsum.</p>
    
  <p><b>OCT/31</b> Suspendisse lectus ipsum, egestas pharetra egestas vitae, ultricies et mi. Ut condimentum nibh et vulputate aliquam. Nullam cursus libero rhoncus lorem auctor, at molestie ex cursus. Morbi finibus ipsum ac erat rhoncus, et convallis metus bibendum.</p> 
    
  <p><b>SEP/18</b> Aenean a porttitor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce porta, sapien vitae placerat tincidunt, purus mi feugiat diam, in gravida sem nisi suscipit nulla. Etiam odio lacus, maximus non lobortis ac, condimentum id magna.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，我确定必须有更好的方法来组织/重写我的代码，但我仍然是一个完全新手，所以如果有人可以帮助我，那将是很棒的！

Answer 1

这可能很难捕捉到，但是这些元素在浏览器的眼中仍然可见，因此你的#updates阻止了所有鼠标事件，因为它在z轴上更高。尝试使用.fadeIn和.fadeOut代替.animate。 fade函数会在动画后将元素设置为display:none;，因此任何元素都不会弄乱鼠标事件。

此外，您的div应该在css中设置为display:none;而不是opacity:0;。

请注意，我对您的JS做了各种更改，以使其更好用。

＆＃13;

＆＃13;

$("#links").mouseleave(function(){
    $(this).fadeOut(300);
});
  
$("#updates").mouseleave(function(){
    $(this).fadeOut(300);
});

$(".announcements").mouseenter(function() {
         $("#links").fadeOut(300);
         $("#updates").fadeIn(300);
});

$(".quicklinks").mouseenter(function() {
         $("#updates").fadeOut(300);
         $("#links").fadeIn(300);
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Work+Sans:400,600');

body { background-color: #ccc; font-family: Arial; }

#nav { background-color: #fff; width: 50px; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; }

.homebutton, .quicklinks, .announcements { width: 50px; position: fixed; z-index: 9999; border-bottom: 1px solid #fff; padding: 17px 0px; font-size:11px; text-align:center; background-color: #fff; border-bottom: 1px dotted #b5b8c0; color: #3f4f79; }

.homebutton { top: 0; left: 0; }
.quicklinks { top: 50px; left: 0; }
.announcements { top: 100px; left: 0; border-bottom: 0px solid; }

.quicklinks:hover, .announcements:hover { color: #b5b8c0; }

#links, #updates { position: fixed; height: 100%; top: 0; left: 50px; index: 99; background-color: rgba(10,10,10,0.85); width: 180px; color: #fff; padding: 30px; display:none; }

#links h1, #updates h1 { font-family: 'Work Sans'; font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; padding: 5px; background-color: #5c6274; display: inline-block; margin-bottom: 10px; }

.navlinks a { display: block; padding: 4px 0px; font-family: 'Work Sans'; font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #86898c; transition: all ease 0.4s; }

.navlinks a b { margin-right: 8px; font-weight: 600; color: #5c6274; }

#updates p { white-space: pre-line; font-size: 10px; color: #9a9a9a; font-family: 'Work Sans'; margin-bottom: 20px; line-height: 130%; text-align: left; }

#updates p b { color: #5c6274; margin-right: 4px; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
</div>
 
  <div class="homebutton"><i class="fa fa-home" aria-hidden="true"></i></div>
  
  <div class="quicklinks"><i class="fa fa-bars" aria-hidden="true"></i></div>

<div class="announcements"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
  
<div id="links">
  <h1>QUICK LINKS</h1><br>
  <div class="navlinks">
    <a href="#"><b>01</b> LINK</a>
    <a href="#"><b>02</b> LINK</a>
    <a href="#"><b>03</b> LINK</a>
    <a href="#"><b>04</b> LINK</a>
    <a href="#"><b>05</b> LINK</a>
  </div>
</div>

<div id="updates"><h1>updates</h1>
  <p><b>NOV/06</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta, velit et hendrerit tincidunt, metus erat tempus ante, in ullamcorper quam nisi in nisi. Suspendisse sed pulvinar ipsum.</p>
    
  <p><b>OCT/31</b> Suspendisse lectus ipsum, egestas pharetra egestas vitae, ultricies et mi. Ut condimentum nibh et vulputate aliquam. Nullam cursus libero rhoncus lorem auctor, at molestie ex cursus. Morbi finibus ipsum ac erat rhoncus, et convallis metus bibendum.</p> 
    
  <p><b>SEP/18</b> Aenean a porttitor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce porta, sapien vitae placerat tincidunt, purus mi feugiat diam, in gravida sem nisi suscipit nulla. Etiam odio lacus, maximus non lobortis ac, condimentum id magna.</p>
</div>

＆＃13;

＆＃13;

＆＃13;