mouseleave function not working

Question

Hi i have a question fixing my code. Mouseover() or hover() works perfectly but not when the pointer leaves the icon. It was supposed to be an icon that changes into a number when hovered then goes back to icon when pointer leaves. It only works normal if the pointer gently leaves left or right side.

Here is the code

HTML:

<article class="one_quarter first" id="ccount1" ><a class="ringcon btmspace-50" id="count1" href="#"><i class="fas fa-location-arrow"></i></a>
    <h6 class="heading">In Queue Messages</h6>
    <p>Queue Messages - Count of messages currently sending.</p>
  </article>

Script:

<script>
$(document).ready(function(){
$("#count1").hover(function(){
    $("#count1").html('<i> 0 </i>');
});
$("#count1").mouseleave(function(){
    $("#count1").html('<i class="fas fa-location-arrow"></i>');
});});</script>

Help me please. Thank you T_T

score 0 · Accepted Answer · answered Jul 03 '18 at 02:19

I think these two (mouseenter and mouseleave) should be together, so I modified below.

Try to modify the <i> element and there should be an visible element to trigger mouseenter(or hover, mouseover) event handler.

Here shows the difference of all of the mouse enter event.

$(document).ready(function() {
    $("#count1").mouseenter(function() {
        $("#count1 i").removeClass('fas fa-location-arrow').html('mouse entered');
    });
    $("#count1").mouseleave(function() {
        $("#count1 i").addClass('fas fa-location-arrow').html('mouse leaved!');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="one_quarter first" id="ccount1">
    <a class="ringcon btmspace-50" id="count1" href="javascript:void(0)">
  <i class="fas fa-location-arrow">you should add something here for mouseleave</i>
 </a>
    <h6 class="heading">In Queue Messages</h6>
    <p>Queue Messages - Count of messages currently sending.</p>
</article>

It actually worked. Thank you so much T_T. Would never thought of this solution lol. Maybe i should increase my stock on script and query more xD — DrCreampuff, Jul 03 '18 at 02:41

mouseleave function not working

1 Answers1