带有图标字体的引导按钮重复JavaScript事件问题

我有以下按钮：

<a href="/operation" class="btn btn-xlg btn-marine center-block" title="" data-original-title="Manage active jobs' Operations" aria-describedby="tooltip598388">
  <i class="fox-operation"></i>Operations
</a>

我使用鼠标悬停按钮时保持动画效果，如下所示：

<script>
      $(document).ready(function(){
          var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          $(".btn-xlg").hover(function(){

              $(this).addClass('animated bounce').one(animationEnd, function() {
            $(this).removeClass('animated bounce');

        });
          })
      })
      </script>

$（文档）.ready（函数（）{
var animationEnd='webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationEnd'；
$（“.btn xlg”）.hover（函数（）{
$（this）.addClass（'animated bounce'）.one（animationEnd，function（）{
$（this.removeClass（'animated bounce'）；
});
})
})

问题在于，将按钮从文本移动到图标字体后，似乎会再次调用悬停事件。我尝试过使用鼠标悬停而不是鼠标悬停，我还尝试了选择器

a.btn.btn xlg:not（'I'）

，但结果相同。我不知道为什么当我在同一个元素

a

上时，JavaScript会重新调用该事件

---

签出此项。

尝试使用

mouseenter

事件，而不是

mouseover

：

$(document).ready(function(){
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          
    $(".btn-xlg").on("mouseenter", function(){
        $(this).addClass('animated bounce').one(animationEnd, function() {
            $(this).removeClass('animated bounce');  
        });
    });
});

当定点设备（通常是鼠标）移动到连接了侦听器的元素上时，将触发mouseenter事件

与mouseover类似，它的不同之处在于它不会冒泡，而且当指针从其子代的一个物理空间移动到其自己的物理空间时，它不会被发送。

---

非常感谢。这是一个完美且解释清楚的解决方案。

$(document).ready(function(){
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          
    $(".btn-xlg").on("mouseenter", function(){
        $(this).addClass('animated bounce').one(animationEnd, function() {
            $(this).removeClass('animated bounce');  
        });
    });
});