如何解决悬停,悬停,被击打
$(\'#Box_1,#Box_2,#Box_3,#Box_4\').hover(function() {
$(this).addClass(\'hover\');
},function() {
$(this).removeClass(\'hover\');
});
但是当我点击时,\“HOVER
\”class = .removeClass(\'hover\')
无论如何,当我单击该按钮时,要保留这个“ \1ѭ\”类吗?
http://jsfiddle.net/EAa6p/(这是我的原文)
完成!由本<3
http://jsfiddle.net/EAa6p/1/
谢谢大家
解决方法
我认为您的意思是在发生点击时保持悬停类。
最好的选择是使用data()保存状态并检查悬停状态
var boxes = $(\'#box_1,#box_2,#box_3,#box_4\');
boxes.hover(function() {
$(this).addClass(\'hover\');
},function() {
if (!$(this).data(\'clicked\'))
$(this).removeClass(\'hover\');
}).click(function(){
boxes.not(this).removeClass(\'hover\').data(\'clicked\',false);;
$(this).data(\'clicked\',true);
});
那是你想要的吗?
http://jsfiddle.net/uhc9S/
,CSS:将您的“ 5”规则更改为
#box_1:hover,#box_1.hover,#box_2:hover,#box_2.hover,#box_3:hover,#box_3.hover,#box_4:hover,#box_4.hover {
...
}
JavaScript / jQuery:不要在悬停时添加悬停类,而在悬停时不要将其删除。相反,CSS将处理悬停,而jQuery只需要处理单击:
$(\'#box_1,#box_4\').click(function() {
$(this).addClass(\'hover\');
});
:hover
规则表示它已悬停。如果希望单击后将其悬停,将使用“ 9”规则。
,使用mouseover和mouseout
$(\'#box_1,#box_4\').mouseover(function(){
$(this).addClass(\'hover\');
}).mouseout(function(){
$(this).removeClass(\'hover\');
});
,保持一个包含菜单项ID的变量被单击
var currentSelected = null;
$(\'#box_1,#box_4\').click(function(){
currentSelected = this.id;
});
$(\'#box_1,#box_4\').hover(function(){
if (this.id !== currentSelected){
$(this).addClass(\"hover\");
}
},function(){
if (this.id !== currentSelected){
$(this).removeClass(\"hover\");
}
});
,http://jsfiddle.net/hRnQE/
单击时,切换另一个执行相同操作的\'different \'类...
js
$(\"#box-1,#box-2,#box-3\").hover(function() {
$(this).addClass(\"hover\");
},function() {
$(this).removeClass(\"hover\");
});
$(\"#box-1,#box-3\").click(function() {
$(this).toggleClass(\"hover-clicked\");
});
的CSS
.hover {color:red;}
.hover-clicked {color:red;}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。