鼠标离开功能不起作用

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>