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

У меня проблема. Мой скрипт работает отлично, но я теряю эффект наведения CSS, если вернусь в поле ввода и удалю данные внутри него. Я больше не вижу эффекта наведения.CSS hover НЕ работает после выполнения функции 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}

источник

2012-04-11 Erik

где вы html pls? также ваша функция работает с id = "r1", а ваш css для id = "r2" – Elen

Цените свою помощь. Можем ли мы поболтать? – Erik

У Зеты есть ответ на вашу ситуацию. если этого недостаточно - загляните в функцию on(), которая прислушивается к изменениям в реальном времени – Elen

Стиль тегов (Что JavaScript использует) всегда имеют преимущество перед правилами CSS, в том числе: парить; вы можете получить желаемый эффект таким образом:

$(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"); 
}});

источник

2012-04-11 17:05:27

Ваше решение работает, НО removeAttr или removeClass слишком сильно удаляет. Я освобождаю все, ширину, высоту и т. Д. – Erik

Можно ли переопределить атрибуты css после removeAttr? – Erik

@Erik избегает атрибутов стиля в пользу классов CSS. Тогда у вас не будет такой проблемы. –

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

источник

2012-04-11 17:05:51 Zeta

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

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

.hasData {color:#FFF;}

используя:

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

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

источник

2012-04-11 17:07:27

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

ответ

Смежные вопросы