Question

我有一个链接，当您将鼠标悬停在顶部时，应显示一个下拉菜单。我希望这个下拉菜单在出现/消失时进行转换。目前，当我将鼠标悬停在链接上时，下拉菜单会进入，当我将光标移离链接时，它会转出。问题是下拉菜单一旦再次隐藏，仍然可以恢复＆＃34;短暂的一瞬间，当我将鼠标悬停在它可见的位置时，它会重新出现（请参见此处：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

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

但是，这也意味着您必须明确设置转换以包含pointer-events: none和visibility，但排除opacity，否则只会禁用悬停动画结束（而这正是你想要的）

jQuery的：

pointer-events

CSS：

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

jsFiddle

Answer 2

我建议您不要通过jQuery设置样式，而是使用jQuery添加/删除Classes，然后应用所需的样式。你也可以使用2个类（一个在动画的开头，一个在动画的结尾），如下所示：

https://jsfiddle.net/MattDiMu/mmk9psad/

$('.dropdown').hover(function() {
    $(this).addClass('hovered-1');
  var that = this;
  setTimeout(function() {
    $(that).addClass('hovered-2');
  }, 0)
    }, function() {
  $(this).removeClass('hovered-2');
  setTimeout(function() {
    $(this).removeClass('hovered-1');
  }, 200)
});

CSS过渡简单地导致元素成为可能的＆＃34; hoverable＆＃34;被隐藏之后

2 个答案:

jQuery的：

CSS：