miss9 miss9 - 6 months ago 9
jQuery Question

CSS transition briefly causes element to be "hoverable" after being made hidden

I have a link that when you hover on top, should display a drop down menu. I would like for this drop down menu to have a transition while appearing/dissapearing. Currently, when I hover on the link, the drop down menu transitions in, and when I move the cursor away from the link, it transitions out. The problem is that the drop down menu, once hidden again, is still "hoverable" for a brief moment, causing it to reappear when I hover in the location where it would be were it visible (see it here: https://jsfiddle.net/monroewebdev/jogag3Lb/).

I believe this is due to a lag caused by the exit transition. When I remove transition effects, I do not have this issue. Is there a way to keep the transition effects without causing this lag upon exit? Can I maybe speed up the exit transition? How would I do this?

HTML

<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Rates & Services</a>
<div class="dropdown-content">
<a href="#">Website Design</a>
<a href="#">Website Maintenance</a>
<a href="#">Ecommerce Sites</a>
<a href="#">Social Media Marketing</a>
<a href="#">More Services</a>
</div>
</li>
<!-- list continues on -->
</ul>


CSS

.dropdown {
display: inline-block;
}

.dropdown .dropdown-content {
visibility: hidden;
position: absolute;
background-color: #ed393c;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
}


JQuery 2.2.2

$('.dropdown').hover(function() {
$('.dropdown .dropbtn').css('background-color', '#ed393c');
$('.dropdown .dropdown-content').css('visibility', 'visible');
$('.dropdown .dropdown-content').css('opacity', '1');
}, function() {
$('.dropdown .dropbtn').css('background-color', 'transparent');
$('.dropdown .dropdown-content').css('visibility', 'hidden');
$('.dropdown .dropdown-content').css('opacity', '0');
});

Answer

You can temporarily disable the hover behavior by applying pointer-events: none on the dropdown content when you stop hovering.

However, that also means you have to explicity set the transition to include the visibility and opacity, but exclude the pointer-events, otherwise the hover will only be disabled after the animation ends (and that's exactly not what you want)

jQuery:

$('.dropdown').hover(function() {
    $('.dropdown .dropbtn').css('background-color', '#ed393c');
    // Using a shorthand here to set multiple CSS properties at once
    $('.dropdown .dropdown-content').css({
        visibility: 'visible',
        opacity: 1,
        pointerEvents: 'initial'
    });
}, function() {
    $('.dropdown .dropbtn').css('background-color', 'transparent');
    $('.dropdown .dropdown-content').css({
        visibility: 'hidden',
        opacity: 0,
        pointerEvents: 'none'
    });
});

CSS:

.dropdown .dropdown-content {
   visibility: hidden;
   position: absolute;
   background-color: #ed393c;
   -webkit-transition: visibility 500ms, opacity 500ms;
   -moz-transition: visibility 500ms, opacity 500ms;
   -ms-transition: visibility 500ms, opacity 500ms;
   -o-transition: visibility 500ms, opacity 500ms;
   transition: visibility 500ms, opacity 500ms;
}

jsFiddle