jquery - CSS transition 在被隐藏后短暂地导致元素为 "hoverable"

Question

我有一个链接，当您将鼠标悬停在顶部时，应该会显示一个下拉菜单。我希望这个下拉菜单在出现/消失时有一个过渡。目前，当我将鼠标悬停在链接上时，下拉菜单会转入，当我将光标移离链接时，它会转出。问题是下拉菜单一旦再次隐藏，仍然会“悬停”一小会儿，当我将鼠标悬停在它应该可见的位置时，它会重新出现(请在此处查看:https://jsfiddle.net/monroewebdev/jogag3Lb/)。

我认为这是由于退出过渡导致的滞后。当我删除过渡效果时，我没有这个问题。有没有办法保持过渡效果而不会在退出时造成这种滞后？我可以加快退出过渡吗？我该怎么做？

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 1

当您停止悬停时，您可以通过在下拉内容上应用 pointer-events: none 来暂时禁用悬停行为。

但是，这也意味着您必须明确设置转换以包括visibility 和opacity，但排除pointer-events，否则悬停只会在动画结束后 被禁用(这不是你想要的)

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