如何删除单击时的悬停
如何删除单击时的悬停
提问于 2013-08-09 01:17:44
我在做一个jQuery游戏。我得了4分divS采用2x2设计。玩家需要选择一个选项并使用另一个按钮进行验证。问题是，我有一个悬停效果，添加了一个低不透明度的更改背景的类，以及一个点击效果，设置了较高的不透明度背景。对于divS2，3和4它工作得很好-我悬停和背景改变颜色与不透明度0.3，当我移动鼠标时，它回到白色。当我单击它时，它会将背景更改为0.4，悬停不再影响它们。但是，这对第一个div不起作用：div更改悬停时的背景颜色，但当我单击它时，它会保持悬停颜色，当我鼠标移出时，我会看到单击颜色，每次我悬停它时，都会再次更改悬停颜色，依此类推。
为什么它只发生在div 1上？
代码：
//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(
function () {
$(this).addClass("respuestahover");
},
function () {
$(this).removeClass("respuestahover");
});
//on click function for div1
$(".respuesta1").on("click", function () {
//if it hasnt been clicked, toogle class and change var to true
if (prendido1 == false) {
$(this).toggleClass("respuesta1b");
prendido1 = true;
//if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
if (prendido2 == true) {
$(".respuesta2").toggleClass("respuesta2b");
prendido2 = false;
}
if (prendido3 == true) {
$(".respuesta3").toggleClass("respuesta3b");
prendido3 = false;
}
if (prendido4 == true) {
$(".respuesta4").toggleClass("respuesta4b");
prendido4 = false;
}
//if is already clicked, turn off and change var to false
} else {
$(this).toggleClass("respuesta1b");
prendido1 = false;
}
});对于每个div "respuesta2“、"respuesta3”等，都会重复最后一部分。
有什么想法吗？
****编辑****
我试着清理代码来创建一个jsFiddle，我想我成功了：
http://jsfiddle.net/bqySN/2/
如果任何人感兴趣，我将把代码留在那里，请注意代码是未打磨的，它需要更多的泛化。
编辑2
经过一些测试，我发现了问题所在：
如果我改变css类的顺序，应用程序会变得疯狂：
这个是正确的，先悬停
.respuestahover{
background-color:#f00;
opacity:0.2;
}
.respuestab{
background-color:#f00;
opacity:0.5;
}这个不正确，悬停一下：
.respuestab{
background-color:#f00;
opacity:0.5;
}
.respuestahover{
background-color:#f00;
opacity:0.2;
}我真的不确定为什么会这样，但我很高兴我弄明白了。
Stack Overflow用户
发布于 2013-08-09 01:46:12
您应该简化绑定，使其更具一般性，然后删除所有绑定上的悬停类：
$(".respuesta").on("click", function (index) {
$(this).removeClass("hover");
// do other things
});如果它们在列表中，您还可以使用索引来查找它们的编号。
如果希望悬停不覆盖单击，请将click指定为活动类，并告诉悬停在除它们之外的所有对象上工作：
$('.respuesta:not(.active)').hover(function() {
// do something
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18132093
复制相关文章
相似问题
腾讯云开发者
