javascript - 如何在点击时切换鼠标悬停事件？

Question

我想改变悬停元素的颜色。但是我想在单击元素时禁用悬停效果并将单击的元素设置为红色。再次，如果有人点击元素，我想启用悬停效果并应用悬停效果。

$('.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;
}

标签： javascriptjquerycssmouseentermousehover

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>