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>或为类CSS添加.divElemenT{ display:block;}并添加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类，该类指示该类是可悬停的。然后，在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 4

您通过切换类“红色”执行的方法是正确的。我只是改变了一点

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

这个想法只是在类“ 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>

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

5 个答案: