javascript - jQuery .hover 不循环

Question

我这里有一个代码笔:http://codepen.io/huwrowlands/pen/GgmjqX

HTML:

<div class="site-branding">
  <a href="#">
    <img alt="Land" class="site-logo site-logo-land" src="http://website-test-lab.com/sites/landchain/wp-content/themes/landchain/assets/img/land.png" />
  </a>
</div>

CSS:

/* Basic Styles */
.site-logo {        
    visibility: hidden;
    max-width: 127px;
    margin: 0 auto;
    display: block;
}



/* Animation CSS */
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}
/**/
.slideRightLeft{
    animation-name: slideRightLeft;
    -webkit-animation-name: slideRightLeft; 

    animation-duration: 1s ;    
    -webkit-animation-duration: 1s;

  animation-iteration-count: infinite;
  -webkit-iteration-count: infinite;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRightLeft {
    0% {
        transform: translateX(0%);
    }       
  50% {
    transform: translate(-50%);
  }
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRightLeft {
    0% {
        -webkit-transform: translateX(0%);
    }
  50% {
    transform: translate(-50%);
  }     
    100% {
        -webkit-transform: translateX(0%);
    }
}

JS:

//Animations (Delay)
        jQuery(function(){
            setTimeout(function(){
                jQuery('.site-logo-land').addClass("slideRight");
            }, 1000);
        });


jQuery( ".site-logo" ).hover(function() {
  jQuery( this ).addClass( "slideRightLeft" );
});

在页面加载时，Land Logo 通过添加一个由 CSS 关键帧动画控制的类来动画化。我还有一个 jQuery 代码片段，用于添加另一个类来为悬停时的 Land Logo 制作动画。

我需要的是，每次用户将鼠标悬停在 Land Logo 上时，悬停效果都会起作用。目前，它只执行一次。

不确定，这是与我的 CSS 关键帧动画代码有关，还是我需要用 jQuery 修复的问题。

提前致谢

Answer 1

jQuery hover 函数不像 css :hover 类那样工作，其中样式只在悬停时应用，并在鼠标移出后删除。您需要再次删除 mouseout 上的类:

jQuery( ".site-logo" ).on('mouseout', function() {
  jQuery( this ).removeClass( "slideRightLeft" );
});