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

时间:2019-01-29 02:38:23

标签: javascript jquery css mouseenter mousehover

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

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

5 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您尝试的只是禁用(unbindHover事件。您真正需要的是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>

如果不起作用,请发表评论。

答案 2 :(得分:0)

我建议您创建一个hover类,该类指示该类是可悬停的。然后,在jQuery中,您可以将.hovermouseenter离开事件的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,因为在最初发生事件竞标之后要动态更改类,从而可以侦听动态添加/更改的元素上的事件。

答案 3 :(得分:0)

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

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”中进行悬停事件,然后在单击时将类切换为红色。

答案 4 :(得分:0)

尝试

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