Jquery CSS转换会短暂地导致元素为；“可悬停”；被隐藏后

我有一个链接，当你在上面悬停时，应该会显示一个下拉菜单。我希望此下拉菜单在出现/消失时有一个过渡。当前，当我将鼠标悬停在链接上时，下拉菜单将向内转换，当我将光标移离链接时，下拉菜单将向外转换。问题是，再次隐藏的下拉菜单在短时间内仍然“可悬停”，导致当我将其悬停在可以看到的位置时（请参见此处：）再次出现

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

HTML

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');
});

---

停止悬停时，可以通过在下拉内容上应用

指针事件：none

临时禁用悬停行为

但是，这也意味着您必须明确地设置转换，以包括

可见性

和

不透明度

，但排除

指针事件

，否则仅在动画结束后才禁用悬停（而这恰恰不是您想要的）

jQuery： 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;
}

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

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

.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;
}