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功能不起作用

1 个答案: