如果我过早将鼠标移至子菜单，Firefox 上的 CSS 动画将结束

Posted 2023-03-06

【中文标题】如果我过早将鼠标移至子菜单，Firefox 上的 CSS 动画将结束

【英文标题】：CSS Animation on Firefox ends if I move my mouse to the submenu too soon

【发布时间】：2015-10-26 09:40:10

【问题描述】：

我有一个 CSS 动画，它在我的菜单列表的一侧发送一个子菜单。 我正在使用 animate.css 库

（编辑）这个问题似乎只出现在 Firefox 上。

如果您试图过早地将鼠标移到子菜单上（即在动画完全完成之前），则子菜单会关闭。我的 .submenu 类位于确定这一点的父类 (.person-menu) 中，但在此动画完成之前，.submenu 类似乎并不完全存在。

如果用户在动画完成之前将鼠标移到子菜单上，我该如何做到这一点，他们不会丢失它？

以下是相关代码： html:

<nav class="interview-menu">
    <div class="person-menu"> 
        <div class="person" id="Person One"><a href="#">Person One</a></div>
        <div class="submenu">
            <div class='once'><a>Once</a></div>
            <div class="info"><a href="#">Info</a></div>
        </div>
    </div>
</nav>

javascript/jquery:

var submenuInAnimation = "animated fadeInLeft";
var submenuOutAnimation = "animated fadeOutLeft";
var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

$(".person-menu").hover(
function () 
    $(this).children(".submenu").removeClass(submenuOutAnimation);
    $(this).children(".submenu").css("display", "inline-block");
    $(this).children(".submenu").addClass(submenuInAnimation).one(animationEnd, 
        function () 
            $(this).removeClass(submenuInAnimation);
            $(this).css("display", "inline-block");
        );
,
function () 
    $(this).children(".submenu").removeClass(submenuInAnimation); 
    $(this).children(".submenu").addClass(submenuOutAnimation).one(animationEnd,
        function () 
            $(this).removeClass(submenuOutAnimation);
            $(this).css("display", "none");
        );
);

css:

.person-menu 
    //width:150px;
    width: 420px;    // This is the change I made to fix this
    padding:0;
    position:static;

.person 
    display:inline-block;

.person a 
    display: block;
    width:150px;

.submenu 
    display:none;
    width:150px;
    position:static;
    z-index:-1;

.submenu a 
    display: block;
    padding: .4em 1.2em;

.info 
    display: inline-block;
    position:relative;
    width:30px;
    right:5px;

.info a 
    display:block;
    width:30px !important;

.once 
    display: inline-block;
    cursor:pointer;

.once a 
    display: block;
    width: 80px;
    position: relative;

.interview-menu 
    width: 180px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    white-space:nowrap;

.interview-menu a 
    padding: .4em 1.2em;
    text-align: center;
    border-color:white;
    background:linear-gradient(#FFF, #EFEFEF);

.interview-menu a:hover, .interview-menu a:focus 
    background:linear-gradient(#FFF, #DDD);

http://jsfiddle.net/ehsckewz/2/

我已经尝试过使用可见性：隐藏；并显示：无；隐藏 .submenu 类的方法。

我还尝试（但未在此处反映）.person-menu 类中的空白以保留该位置，直到 .submenu 准备好。但仍然没有运气。

编辑：已修复！这只是 Firefox 的一个问题。我将.person-menu 的宽度编辑为 420px，使其与子菜单延伸到的右侧重叠。

【参考方案1】：

你用的是什么IE？它适用于 IE 10 和 Chrome。

【讨论】：

我使用的是 Firefox。我刚刚检查了 Chrome，你确实是正确的，它在那里工作。

这不是答案，应该是评论。