Question

我正在开发一些jquery游戏，我在2x2设计中有4个div，他们需要选择1个选项并用另一个按钮验证。事情是我有一个悬停效果添加一个类，它改变背景的低不透明度和点击效果设置背景具有更高的不透明度，对于div 2,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 clases的顺序，应用程序会发疯：

这个是正确的，首先悬停

.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;
}

我不确定为什么会这样，但我很高兴我明白了。

Answer 1

你正在悬停中添加一个类...如果你可以使用css中的：悬停状态，你为什么要通过javascript实现？例如：

#foo .element p { color: red; }
#foo .element:hover p { color: blue; }

编辑：

抱歉，我错过了原来的问题。如果要在单击后删除悬停效果，则有很多不同的方法可以执行此操作。您可以通过css删除使用悬停定义的类，或者如果您需要jQuery解决方案，可以使用带有.on的mouseenter / mouseleave然后取消绑定。

See the following fiddle example

Answer 2

你应该简化绑定以便更一般地定位它们，然后删除所有这些上的悬停类：

$(".respuesta").on("click", function (index) {
  $(this).removeClass("hover");
  // do other things
});

您还可以使用索引查找它们在列表中的号码。

如果您希望悬停不覆盖点击，请将点击设为活动课程，并告诉鼠标悬停在除了他们之外的所有内容上工作：

$('.respuesta:not(.active)').hover(function() {
  // do something
}

如何在点击时删除悬停

2 个答案: