鼠标离开功能不起作用

Question

您好，我有一个关于修复我的代码的问题。 Mouseover() 或 hover() 可以正常工作，但当指针离开图标时就不行了。它应该是一个图标，在悬停时变为数字，然后在指针离开时返回图标。只有指针轻轻离开左侧或右侧才能正常工作。

这是代码

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

请帮帮我。谢谢T_T

Answer 1

我觉得这两个（mouseenter和mouseleave）应该在一起，所以我在下面修改了。

尝试修改<i>元素，应该有可见元素触发mouseenter(或hover,mouseover)事件处理程序。

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>

鼠标离开功能不起作用

mouseleave function not working

javascript

jquery

html

hover

mouseevent