Переходное псевдо стили в jQuery
-
29-09-2019 - |
Вопрос
Как я могу перезаписать CSS ниже JQUERY?
(Анимации не работают, и это просто мгновенный переключатель.)
menu span ul {display: none;}
menu span:hover ul {display: block;}
$('#menu span').mouseenter(function(){
$('#menu span ul').slideDown('fast');
}).mouseleave(function(){
$('#menu span ul').slideUp('fast');
});
Решение
Один трюк для изящной оформления - не должен переопределить стили, как это:
<noscript>
<style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>
Есть связанная таблица стилей одинаково со всеми этими стилями-non-js-пользователями.
Или сделать это через класс, который вы применяете к #menu
что вы можете удалить, чтобы правила больше не совпадали, как это:
#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}
И в вашем скрипте просто удалите этот класс:
$("#menu").removeClass("noJS");
В качестве примечания, вы можете снизить свой код, используя .hover()
и .slideToggle()
как это:
$('#menu span').hover(function(){
$(this).find('ul').slideToggle('fast');
});
Другие советы
Вы не видите анимацию, потому что ваши CSS переопределяют его.
Удалять
menu span:hover ul {display: block;}
Я не хотел бы попытаться переопределить CSS для размещения браузеров, у которых нет включения JS. Номер настолько мал, что не стоит рассмотреть.