Событие mouseleave () не работает только для одного элемента

Rachel Mak спросил: 13 октября 2017 в 07:32 в: javascript

Я новичок в Jquery (и JavaScript в этом отношении), и я пытался создать боковую панель, где при наведении курсора на значки показывались бы их соответствующие элементы div ("боковая панель", если хотите).

Я хочу, чтобы он вел себя так, чтобы всякий раз, когда вы щелкали мышью из #nav и боковых панелей (#links, #updates), они исчезали из поля зрения (я использую метод animate и устанавливаю непрозрачность равной 0). Это работает для #updates, но не для элемента #links ...

Интересно, это потому, что, как я написал код, событие mouseleave для #links не работает? Все работает, кроме этого.

У меня есть 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>

Как вы можете видеть, я уверен, что должен быть лучший способ организовать / переписать мой код, но я все еще новичок в этом, так что если кто-нибудь может мне помочь, это было бы здорово!


0 ответов