1

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

这个是正确的，先悬停

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

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

4

2 回答 2

0

您在悬停时添加了一个类...如果您可以使用 css 中的 :hover 状态，为什么要通过 javascript 来执行此操作？例如：

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

编辑：

对不起，我错过了最初的问题。如果您想在单击后删除悬停效果，您有很多不同的方法可以做到这一点。您可以通过 css 删除使用悬停定义的类，或者如果您想要一个 jQuery 解决方案，您可以使用带有 .on 的 mouseenter/mouseleave，然后使用 off 取消绑定。

请参阅以下小提琴示例。

于 2013-08-08T17:32:45.373 回答
0

您应该简化绑定以更通用地定位它们，然后删除所有它们上的悬停类：

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

如果它们在列表中，您还可以使用索引来查找它们的编号。

如果您希望悬停不覆盖点击，请给点击一个活动类并告诉悬停在除它们之外的所有内容上工作：

$('.respuesta:not(.active)').hover(function() {
  // do something
}
于 2013-08-08T17:46:11.743 回答