我想更改悬停元素的颜色。但是,我想在单击元素时禁用悬停效果,并将单击的元素设置为红色。再次,如果有人点击元素,我想启用悬停效果并应用悬停效果。
$('.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;
}
答案 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)
您尝试的只是禁用(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>
如果不起作用,请发表评论。
答案 2 :(得分:0)
我建议您创建一个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
,因为在最初发生事件竞标之后要动态更改类,从而可以侦听动态添加/更改的元素上的事件。
答案 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>