Question

我正在为一个我正在为客户建立的网站发生一个非常奇怪的问题。我在SVG元素上有一系列CSS动画，这些动画由父元素上的hover事件触发......这里是对SASS的快速浏览：

.top-bar {
    .name {
        a {
            display: block;

            svg {
                max-height: $topbar-height;
                padding-top: rem-calc(10);
                padding-bottom: rem-calc(10);

            }

            @media #{$large-up} {
                width: 150px;
            }
        }
        &.hover {

            svg {
                > path {
                    -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                    -webkit-animation-fill-mode: both;
                            animation-fill-mode: both;
                    -webkit-animation-name: fadeInUp;
                            animation-name: fadeInUp;

                    &:nth-child(2) { animation-delay: 0.2s; }
                    &:nth-child(3) { animation-delay: 0.3s; }
                    &:nth-child(4) { animation-delay: 0.4s; }
                    &:nth-child(5) { animation-delay: 0.5s; }
                    &:nth-child(6) { animation-delay: 0.6s; }
                }

                > g {
                    -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                    -webkit-animation-fill-mode: both;
                            animation-fill-mode: both;
                    -webkit-animation-name: fadeInRight;
                            animation-name: fadeInRight;
                            animation-delay: 0.6s;
                }
            }

        }
    }

由于动画需要几秒钟才能完成，我不希望它停止，如果用户将鼠标悬停在父元素上，我有一点jQuery即添加{{1}类和动画与之相关。这是我的JS：

.hover

脚本工作正常，在悬停时添加了一个类，在2.5秒后它被删除了......完美。除非用户点击页面上的任何位置，否则会神秘地删除该类！这使得动画停止，整个SVG看起来很破碎。

我没有任何冲突或甚至与$(document).ready(function() { $('.top-bar .name').hover(function(event) { event.preventDefault(); animateHover(this); }, function() { animateHover(this); }); function animateHover(elm) { var $elm = $(elm), hover_class = 'hover', status = $elm.hasClass(hover_class); if ( !status ) { $elm.addClass(hover_class); setTimeout(function(){ $elm.removeClass(hover_class); }, 2500 ); } else { return false; } } });事件相关联的JS，所以我对浏览器删除click类的原因感到困惑。< / p>

有关可能导致此问题的任何建议！？

任何点击事件都意外删除了CSS类

0 个答案: