javascript - 如何取消点击悬停

Question

我正在开发一款 jQuery 游戏。我在 2x2 设计中有 4 个 div。玩家需要选择一个选项并使用另一个按钮进行验证。问题是，我有一个悬停效果，添加了一个改变低不透明度背景的类，还有一个点击效果设置背景具有更高的不透明度。对于 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 类的顺序，应用程序就会变得疯狂:

这个是正确的，hover first

.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 的 :hover 状态，您为什么要通过 javascript 这样做？例如:

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

编辑:

抱歉，我错过了原来的问题。如果你想在点击后移除悬停效果，你有很多不同的方法来做到这一点。您可以通过 css 删除用悬停定义的类，或者如果您想要一个 jQuery 解决方案，您可以使用带有 .on 的 mouseenter/mouseleave，然后使用 off 解除绑定(bind)。

See the following fiddle example .