CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
SaidbakR
SaidbakR

Reputation: 13544

Bootstrap button with icon font duplicate JavaScript event issue

I have the following button:

<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>

And this is its CSS roles:

.btn-xlg {
    padding: 20px 16px;
    font-size: 24px;
    line-height: 1.3333333;
    border-radius: 6px;
    text-shadow: 1px 0 2px #000;
    font-weight: 600;
}
.btn.btn-xlg i {
    float: left;
    border-right: solid 2px;
    display: inline-block;
    height: 72px;
    padding: 20px 5px 0 0;
    margin-top: -20px;
    margin-bottom: -26px;
}
.btn-marine {
    color: #fff;
    background-color: #0AA;
    border-color: #0AA;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.fox-operation:before {
    content: '\e801';
}
[class^="fox-"]:before, [class*=" fox-"]:before {
    font-family: "fox";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    font-size: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

I'm using Animate.css to maintain animation effects while hover the button like the following:

<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>

The problem is that hover event seems to be invoked again after moving on the button from the text to the icon font. I have tried to use mouseover instead of hover also I tried the selector a.btn.btn-xlg:not('i') but the same result. I don't know why JavaScript re invokes the event while I'm on the same element a?

Checkout this DEMO.

Upvotes: 0

Views: 123

Answers (1)

curveball
curveball

Reputation: 4505

Try to use mouseenter event instead of 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');  
        });
    });
});

DEMO

The mouseenter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.

Similar to mouseover, it differs in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space.

MDN

Upvotes: 1

Related Questions