функция отпускания мышки не работает - PullRequest
Новая
       10

функция отпускания мышки не работает

0 голосов
/ 03 июля 2018

Привет, у меня есть вопрос, исправляющий мой код. 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>

Помогите мне, пожалуйста. Спасибо Т_Т

1 Ответ

0 голосов
/ 03 июля 2018

Я думаю, что эти два (mouseenter и mouseleave) должны быть вместе, поэтому я изменил ниже.

Попробуйте изменить элемент <i>, и должен быть видимый элемент для запуска обработчика событий mouseenter (или hover, mouseover).

Здесь показана разница всех событий ввода мыши. 

$(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>
...