mouseleave（）イベントがただ1つの要素で機能していない

Question

私はJquery（とその点ではJavaScript）を初めて使いました。アイコン上にマウスを置くと、それぞれのdiv要素が表示されるサイドバーを作成しようとしていました"もしそうなら）。

#navとサイドバー（#links、#updates）からマウスを離したときに、ビューからアニメーションメソッドを使用して不透明度を0に設定するようにしてください。これは#updatesでは機能しますが、#links要素では機能しません。

#linksのmouseleaveイベントはどのように記述されているのでしょうか？それ以外はすべて動作します。あなたは、私は確信している見ることができるように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>

は/書き換えを整理するためのより良い方法がなければならない：

私は右ここで働いている何のためCodePenを持っています私のコードは、しかし、私はまだこれで全部の初心者ですので、誰かが私を助けることができたら、それは素晴らしいだろう！

Answer 1

これは捕捉するのが難しいかもしれませんが、要素はブラウザの目に見えるため、#updatesはz軸の方が高いのですべてのマウスイベントをブロックしています。 .animateの代わりに.fadeInと.fadeOutを使用してください。 fade関数は、アニメーションの後に要素をdisplay:none;に設定します。したがって、要素によってマウスイベントが混乱することはありません。

また、CSSではopacity:0;ではなくdiv3をdisplay:none;に設定する必要があります。

私はあなたの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>