Как удалить падение на щелчке ⇐ Jquery

[Anonymous]

Я работаю над игрой jQuery. У меня есть 4 div s в дизайне 2x2. Игрок должен выбрать 1 опцию и проверить с другой кнопкой. Дело в том, что у меня есть эффект падения, добавляя класс, который меняет фон с низкой непрозрачностью, и эффект клика устанавливает фон с более высокой непрозрачностью. Для div s 2, 3 и 4 это работает нормально - я пахает и фон меняет цвет с непрозрачностью 0,3, а когда я выдвигаю мышь, она возвращается к белому. И когда я нажимаю на него, это меняет фон на 0,4, а на них больше не влияет. Тем не менее, это не работает для первого div: div изменяет цвет фона на парящем, но когда я нажимаю на него, он сохраняет цвет паха, и когда я мышись, я вижу цвет щелчка, и каждый раз, когда я пахаю, он снова меняет цвет пахал и т. Д.

Код: Выделить всё

//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" и т. Д. Работа:
http://jsfiddle.net/bqysn/2/образное. Нашел проблему: < /p>
Если я изменяю порядок моего CSS Class, приложение соходит с ума: < /p>
Это правильное, с парижкой первым < /p>

Код: Выделить всё

.respuestahover{
background-color:#f00;
opacity:0.2;
}

.respuestab{
background-color:#f00;
opacity:0.5;
}
< /code>
Этот неверный, Hover econd: < /p>
.respuestab{
background-color:#f00;
opacity:0.5;
}

.respuestahover{
background-color:#f00;
opacity:0.2;
}

Я не совсем уверен, почему это ведет себя так, но я рад, что понял это.

Подробнее здесь: https://stackoverflow.com/questions/181 ... r-on-click