Anulación de estilos seudo en jQuery
-
29-09-2019 - |
Pregunta
¿Cómo puedo sobrescribir el CSS a continuación con jQuery?
(Las animaciones no están en ejecución y es simplemente un interruptor instantáneo.)
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');
});
Solución
Un truco para la degradación grácil es no tener que anular los estilos, así:
<noscript>
<style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>
Por tener una hoja de estilo vinculada la misma manera con todos estos estilos para la no-JS-usuario.
O, hacerlo a través de una clase que se aplican a #menu
que se puede eliminar por lo que las reglas de juego ya no es, como esto:
#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}
Y en el script simplemente eliminar esa clase:
$("#menu").removeClass("noJS");
Como nota al margen, se puede bajar de peso utilizando su código .hover()
y .slideToggle()
como esto:
$('#menu span').hover(function(){
$(this).find('ul').slideToggle('fast');
});
Otros consejos
Usted no está viendo la animación porque el CSS está anulando la misma.
Eliminar
menu span:hover ul {display: block;}
yo no moleste en tratar de anular el css para dar cabida a los navegadores que no tienen habilitados js. El número es tan pequeño que no vale la pena considerar.