Как переключить событие мыши при наведении мыши?

Question

Я хочу изменить цвет элемента на Hover.Однако я хочу отключить эффект наведения при нажатии на элемент и установить выделенный элемент красным.Опять же, если кто-то нажимает на элемент, и я хочу включить эффект наведения и применить эффект наведения.

$('.divElement').on('mouseenter', function () {
    $(this).addClass('red');
});
$('.divElement').on('mouseleave', function () {
    $(this).removeClass('red');
});
$('.divElement').on('click', function () {
    $(this).removeClass('red');
    $(this).off('mouseenter mouseleave');
});

Я пробовал этот код jQuery.

<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</div>
<div class="divElement">Element 4</div>

.divElement {
    color: blue;
}
.divElement.red {
    color: red;
}

Answer 1

попробуйте

$('.divElement').click(function(){
	if($(this).hasClass("red")||$(this).hasClass("selected")){
    	$('.divElement').toggleClass("red");
    	$(this).toggleClass("selected");
    }
});

.red:hover,.selected{
      color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divElement red">Element 1</div>
    <div class="divElement red">Element 2</div>
    <span class="divElement red">Element 3</span>
    <div class="divElement red">Element 4</div>

Answer 2

Ваш подход с помощью переключателя класса "красный" правильный.Я просто немного изменяю

HTML

<div class="divElement red">Element 1</div>
<div class="divElement red">Element 2</div>
<div class="divElement red">Element 3</div>
<div class="divElement red">Element 4</div>

CSS

.divElement {
    color: blue;
}
.divElement.red:hover, .divElement.selected {
    color: red;
}

JQUERY

$('.divElement').on('click', function () {
$(this).toggleClass('red selected');
});

Идея состоит в том, чтобы сделать событие при наведениикласс "красный", тогда мы переключаем красный класс для элемента при нажатии.

Answer 3

То, что вы пытались, это просто отключить (unbind) событие Hover.Что вам действительно нужно, так это toggle событие hover, если оно clicked.

Прежде всего, я хотел бы предложить вам изменить тег <span> на <div> или добавитьCSS для элемента класса .divElemenT{ display:block;} else inline-block и элемента block могут зависать одновременно.

var hoverEvent= true;
$(".divElement").hover(
  function() {
    if(hoverEvent) $(this).toggleClass("red");
  }
);

$('.divElement').click(function() {
   $(this).toggleClass('selected');
   $('.divElement').not(this).removeClass('selected,red');// remove this line if you want multiple selector
   hoverEvent= !hoverEvent;
});

.divElement {
    color: blue;
    display:block;
}
.divElement.red {
    color: red;
}
.selected{
font-weight:bold;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</span>
<div class="divElement">Element 4</div>

Пожалуйста, оставьте комментарий, если он не работает.

Answer 4

Я предлагаю вам создать класс hover, который указывает на то, что этот класс доступен для поиска.Затем в вашем jQuery вы можете выбрать элементы с классом .hover для ваших событий mouseenter и mouseleave.Это означает, что вместо отключения прослушивателей событий для ваших элементов вы можете просто переключить класс hover для каждого элемента.

См. Рабочий пример ниже:

$(document).on('mouseenter', '.divElement.hover', function() {
  $(this).addClass('red');
});
$(document).on('mouseleave', '.divElement.hover', function() {
  $(this).removeClass('red');
});
$('.divElement').on('click', function() {
  $(this).toggleClass('hover');
});

.divElement {
  color: blue;
}

.divElement.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement hover">Element 1</div>
<div class="divElement hover">Element 2</div>
<div class="divElement hover">Element 3</div>
<div class="divElement hover">Element 4</div>

Примечание : вам нужно использовать $(document).on, поскольку вы динамически меняете классы после того, как изначально происходит связывание событий,позволяя вам слушать события на элементах, динамически добавляемых / изменяемых.

Answer 5

Использовать mousedown событие.Клик отвечает после завершения клика, mousedown работает между завершением клика.

$('.divElement').on('mouseenter', function () {
    $(this).addClass('red');
});
$('.divElement').on('mouseleave', function () {
    $(this).removeClass('red');
});
$('.divElement').on('mousedown', function () {
$('.divElement').removeClass('red');
    $(this).addClass('red');
    $('.divElement').off('mouseenter mouseleave');
});

.divElement {
    color: blue;
}
.divElement.red {
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divElement">Element 1</div>
<div class="divElement">Element 2</div>
<span class="divElement">Element 3</span>
<div class="divElement">Element 4</div>