如何使用toggleClass
如何使用toggleClass
提问于 2019-05-14 11:15:30
我想用mouseover和mouseleave绑定项目，以突出我创建的函数。我的剧本不管用，我也不知道我做错了什么。
$(function() {
$("#evtTarget").bind("mouseover", highlight);
$("#evtTarget").bind("mouseleave", highlight);
});
function highlight(evt) {
$("#evtTarget").toggleClass(highlighted);
}.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}
.highlighted {
background-color: Red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Binding and Unbinding Events with jQuery</title>
</head>
<body>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-14 11:17:41
你差点就把""忘在$("#evtTarget").toggleClass(highlighted);上了
应该是$("#evtTarget").toggleClass("highlighted");
Demo
function highlight() {
$("#evtTarget").toggleClass("highlighted");
}
$(function() {
$("#evtTarget").bind("mouseover", highlight);
$("#evtTarget").bind("mouseleave", highlight);
});.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}
.highlighted {
background-color: Red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
Stack Overflow用户
发布于 2019-05-14 11:17:26
逻辑的问题在于，需要将highlighted作为字符串提供给toggleClass()方法：
$(function() {
$("#evtTarget").bind("mouseover", highlight);
$("#evtTarget").bind("mouseleave", highlight);
});
function highlight(evt) {
$("#evtTarget").toggleClass('highlighted');
}.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}
.highlighted {
background-color: Red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
尽管如此，这里绝对不需要任何JS或jQuery，因为在CSS中使用:hover伪选择器可以更有效地(而且性能更好)实现相同的效果：
.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}
#evtTarget:hover {
background-color: Red;
}<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
如果要实现div文本中指出的行为，在单击div本身时禁用悬停行为，则可以向元素中添加一个类，然后使CSS规则足够具体，以便:hover不覆盖它，如下所示：
$('#evtTarget').click(function() {
$(this).addClass('disable-hover');
});.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}
#evtTarget:hover {
background-color: Red;
}
#evtTarget.disable-hover {
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56129148
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号