как удалить наведите указатель мыши на

Question

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

Почему это происходит только на 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; 
    } 
}); 

Последняя часть повторяется для каждого сНу "respuesta2", "respuesta3", и т.д ..

Любая идея?

* EDIT *

Я пытался очистить код, чтобы сделать jsFiddle, и я думаю, что я получил его на работу:

http://jsfiddle.net/bqySN/2/

Я просто оставлю код там, если кто-то заинтересован, помните, что код неполирован и ему нужны дополнительные обобщения.

EDIT 2

После некоторого тестирования я действительно нашел проблему:

если я изменить порядок моей CSS clases приложение сходит с ума:

Это один правильный, с зависанием в первую очередь

.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

Вы добавляете класс на hover ... зачем вы это делаете с помощью javascript, если вы можете просто использовать: hover state из css? Например:

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

EDIT:

К сожалению, я скучаю оригинальный вопрос. Если вы хотите удалить эффект наведения после нажатия, у вас есть много разных способов сделать это. Вы можете удалить класс, определенный с помощью наведения с помощью css, или если вы хотите использовать jQuery-решение, вы можете использовать mouseenter/mouseleave с .on, а затем отключить отключение.

See the following fiddle example.

Answer 2

Вы должны упростить привязки только цель их немного более обобщенно, а затем удалить классы при наведении курсора мыши на всех из них:

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

Вы также можете использовать индекс, чтобы найти какой номер они, если они» re в списке.

, если вы хотите, чтобы парить, чтобы не отвергнуть щелчок, дать нажмите активный класс и сказать парит работать на все, кроме них:

$('.respuesta:not(.active)').hover(function() { 
    // do something 
}