javascript - mouseleave() 事件不适用于一个元素

Question

我是 Jquery(和 JavaScript)的新手，我一直在尝试制作一个侧边栏，将鼠标悬停在图标上会显示它们各自的 div 元素(如果您愿意，可以称为“侧边栏”)。

我希望它的行为是这样的，只要您将鼠标移出#nav 和侧边栏(#links、#updates)，它们就会从 View 中消失(我正在使用动画方法并将不透明度设置为 0)。这适用于#updates，但不适用于#links 元素...

不知是不是我写代码的原因，#links 的 mouseleave 事件不工作？除此以外一切正常。

我有一个 CodePen 用于我正在做的事情:https://codepen.io/fleche/pen/qVNzMG

$(".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)
});

@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; }

<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>

如您所见，我确信一定有更好的方法来组织/重写我的代码，但我在这方面仍然是个新手，所以如果有人能帮助我，那就太棒了!

Answer 1

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

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

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

$("#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);
});

@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; }

<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>