Как убрать наведение на клик ⇐ Html

[Anonymous]

Я работаю над игрой на jQuery. У меня есть 4 элемента div размером 2x2. Игроку необходимо выбрать 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 говорит, что приложение сходит с ума:
Это правильно, сначала с наведением курсора

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

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

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

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