CSS 过渡短暂地导致元素在隐藏后被"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，否则悬停只会在动画结束后被禁用（而这正是您想要的）

j查询：

$('.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;
}

js小提琴