Code Example: Troubleshooting Mouseleave Functionality in Javascript and CSS

The issue is that the elements are still visible in the browser, but the mouse events are being blocked by the higher z-axis of the . To solve this problem, one option is to load the images first and then bind the events once they have finished loading.


Solution:

Although not easy to detect, the components remain visible in the browser’s view, and as a result of its elevated position in the z-axis,

#updates

is blocking all mouse activities. Consider using

.fadeIn

and

.fadeOut

in place of

.animate

. Upon completion of the animation, the

fade

features will designate the component as

display:none;

, ensuring that no other elements interfere with mouse events.

In the css, ensure that you set your divs to

display:none;

and not

opacity:0;

.

Kindly be informed that I have made several modifications to your JS code in order to enhance its performance.

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



 
  

updates

NOV/06 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.

OCT/31 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.

SEP/18 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.

Frequently Asked Questions