CSS转换短暂地导致元素在隐藏后“悬空”。
CSS转换短暂地导致元素在隐藏后“悬空”。
提问于 2016-06-05 16:05:39
我有一个链接，当你悬停在顶部，应该显示一个下拉菜单。我希望这个下拉菜单在出现/消失时有一个转换。当前，当我在链接上悬停时，下拉菜单会在其中切换，当我将光标从链接移开时，它就会退出。问题是，下拉菜单(一旦再次隐藏)仍然“悬停”片刻，当我悬停在可以看到它的位置时，它就会再次出现(参见此处：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');
});回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-05 16:25:18
当您停止悬停时，可以通过在下拉内容上应用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37643963
复制相关文章
相似问题
腾讯云开发者
