Наведение CSS НЕ работает после выполнения функции KEYUP

У меня проблема. Мой скрипт работает отлично, но я теряю эффект наведения CSS, если возвращаюсь к полю ввода и удаляю данные внутри него. Я больше не вижу эффекта наведения.

Перед выполнением функции keyup эффект наведения работает правильно, но после выполнения функции keyup я теряю наведение, которое больше не работает ЕСЛИ я удаляю данные во вводе.

Может ли кто-нибудь увидеть проблему или конфликт и возможное решение?

$(document).ready(function(){

   $("#r1 input").keyup(function() { 
   if($("#r1 input").val().length > 0 ) 
     $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF");
   else {if($("#r1 input").val().length == 0) 
     $("#r1 .bx").css("background-color", "#E8E8E8").css("color", "#000"); }});
});

Мой CSS:

#r1:hover div.bx, #r1:hover input { background-color: #A9A9A9; cursor:pointer}

javascript function jquery keyup
person Erik    schedule 11.04.2012    source источник
comment
где вы html пожалуйста? также ваша функция работает с id=r1, а ваш css для id=r2   -  person Elen    schedule 11.04.2012
comment
Ценю твою помощь. Можем ли мы поболтать?   -  person Erik    schedule 11.04.2012
comment
У Зетов есть ответ для вашей ситуации. если этого недостаточно - загляните в функцию on(), которая прослушивает живые поправки   -  person Elen    schedule 11.04.2012

Ответы (3)


arrow_upward
0
arrow_downward

Тег стиля (что использует javascript) всегда имеет предпочтение перед правилами CSS, включая :hover; вы можете получить желаемый эффект таким образом:

$(document).ready(function(){

   $("#r1 input").keyup(function() { 
   if($("#r1 input").val().length > 0 ) 
     $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF");
   else {
     $("#r1 .bx").removeAttr("style"); }});
});

Или вы можете сделать это лучше с классами

$(document).ready(function(){

   $("#r1 input").keyup(function() { 
   if($("#r1 input").val().length > 0 ) 
     $("#r1 .bx").addClass("ligth");
   else {
     $("#r1 .bx").removeClass("ligth");
}});
person Ivan Castellanos    schedule 11.04.2012
comment
Ваше решение работает, НО removeAttr или removeClass удаляет слишком много. Я теряю все, ширину, высоту и т. Д. - person Erik; 11.04.2012
comment
Можно ли восстановить атрибуты css после removeAttr? - person Erik; 11.04.2012
comment
@Erik избегайте атрибутов стиля в пользу классов CSS. Тогда у вас не будет такой проблемы. - person Dan Davies Brackett; 12.04.2012
comment
Да, лучше сделать это с классами CSS, как во втором примере. - person Ivan Castellanos; 12.04.2012

arrow_upward
2
arrow_downward

.css() будет использовать встроенный стиль для изменения стиля ваших элементов. Это предотвратит псевдоклассы, такие как :hover.

Определите классы и используйте вместо них .addClass() и .removeClass() (JSFiddle):

$(document).ready(function(){
   $("#r1 input").keyup(function() {
   if($("#r1 input").val().length > 0 )
          $("#r1 .bx").removeClass('b').addClass('f');
   else {if($("#r1 input").val().length == 0)
      $("#r1 .bx").removeClass('f').addClass('b');; }});
});

#r1:hover div.bx, #r1:hover input { 
    background-color: #A9A9A9; cursor:pointer;
}

.f {background-color:#2f2f2f;color:#fff;}
.b {background-color:#e8e8e8;color:#000;}
person Zeta    schedule 11.04.2012

arrow_upward
0
arrow_downward

Ваш класс CSS может быть переопределен наличием информации о стиле в самом элементе.

Вместо того, чтобы напрямую указывать цвета в ключе, добавьте или удалите класс CSS:

.hasData {color:#FFF;}

используя следующее:

$(document).ready(function(){
    $("#r1 input").keyup(function(ev) {
        $("#r1 .bx").toggleClass('hasData', !!$(this).val());
    });
});

Обратите внимание, что я использую «это» из обработчика событий, а не снова ищу элемент ввода по всему документу, и что переключение выполняется со второй подписью .toggleClass() после приведения значения к логическому (т. е. true, если оно не пустое).

person Dan Davies Brackett    schedule 11.04.2012