如何在单击时删除悬停

how to remove hover on click

本文关键字：删除 悬停 单击      更新时间：2023-09-26

我正在开发一款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类的顺序，应用程序就会变得疯狂：

这个是正确的，悬停在第一个

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

我真的不知道它为什么会这样，但我很高兴我弄清楚了。

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

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

编辑：

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

请参阅以下小提琴示例。

您应该简化绑定，使其更通用，然后删除所有绑定上的悬停类：

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

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

如果您希望悬停不覆盖单击，请为单击指定一个活动类，并告诉悬停处理除它们之外的所有内容：

$('.respuesta:not(.active)').hover(function() {
  // do something
}
相关文章：