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

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;
}

Answer 1

使用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>

Answer 2

您尝试的只是禁用（unbind）Hover 事件。您真正需要的是 toggle hover 事件，如果它是 clicked。

首先，我想建议您，将 <span> 标签更改为 <div> 或为 class 添加 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 3

我建议你创建一个 hover class 来表示 class 是可悬停的。然后在您的 jQuery 中，您可以为 mouseenter 和 mouseleave 离开事件定位带有 .hover class 的元素。这意味着您无需关闭元素的事件侦听器，而只需切换每个元素的 hover class。

请参阅下面的工作示例：

$(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，因为您在事件竞价最初发生后动态更改classes，允许您收听元素上的动态事件 added/changed。

Answer 4

您通过切换 class "red" 的方法是正确的。我只是稍微改变一下

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');
});

我们的想法是只在class "red"中制作悬停事件，然后我们在点击时将元素的类切换为红色。

Answer 5

试试这个

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

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

How to Toggle Mouse Hover Event on Click?

javascript

css

jquery

mouseenter

mousehover