2012-02-17 12 views
8

Después de ejecutar esto: $('.bar').css({'color':'#fff'}); el control deslizante para .bar deja de funcionar. ¿Por qué?Después de cambiar css, el control deslizante no funciona

Además, $('.bar:hover').css({'color':'#fff'}); no cambia el color de la imagen desplegable también, ¿por qué? ¿Qué me estoy perdiendo?

http://jsfiddle.net/hh4NJ/

+0

Posiblemente porque el estado de desplazamiento es una pseudoclase, por lo que cuando cambia el valor de '.bar' también lo cambia para' .bar: hover'. –

+0

'$ ('. Bar: hover')' no es un selector jQuery estándar, ¿está implementado esto mediante un complemento? –

+0

¿Has probado con ... css ("color", "#fff") en lugar de usar el valor de par? Si usa el valor de par quizás cambie el css completo, mientras tanto, si lo hace de una forma que no sea de par, simplemente cambie ese valor de css. – elvenbyte

Respuesta

19

No ha definido lo que quiere decir con "flotar", pero si estamos hablando acerca de CSS :hover, entonces es debido a los estilos en línea (según lo establecido por los estilos de hojas de estilo .css() de anulación.

puede añadir !important a su definición CSS para reemplazar la línea.

.bar:hover { 
    color: #ABCDEF !important; 
} 

no creo que esto funciona con versiones anteriores de IE sin embargo.

DEMO:http://jsfiddle.net/hh4NJ/1/


Otra solución (y posiblemente mejor) sería utilizar .addClass() en lugar de .css() para cambiar el estilo. A continuación, puede ocuparse de todo en su CSS (excepto para agregar/eliminar la clase del curso).

$('.bar').addClass('whiteColor'); 

.whiteColor { 
    color:#fff; 
} 

DEMO:http://jsfiddle.net/hh4NJ/2/


En cuanto a su actualización, no se puede usar una pseudo selectores como :hover para la selección de DOM.

+0

Pero, ¿por qué jquery sobrescribe el evento de desplazamiento? Entiendo la prioridad de en línea sobre la externa, pero eso solo se aplica cuando hay un conflicto de estilo. – Yamcha

2

En el cascade, las reglas en el atributo de estilo vencerán las reglas aplicadas con un selector.

El método jQuery css modifica el atributo de estilo.

Mantenga su CSS y JS separados. Utilice JS para editar y agregar clases del HTML, y aplique su CSS usando un selector de clase. (Asegúrese de que la regla :hover aún tenga un selector suficiente de specific).

Como rápido y solución sucia, también puede hacer su :hover reglas !important, pero you shouldn't.

Además, $('.bar:hover').css({'color':'#fff'}); no cambia el color del flotar, ¿por qué?

motor de selector de jQuery coincide con los elementos, no modifica la hoja de estilos. Si esto fuera compatible, dirías "En el momento en que se ejecuta este código, haz que la barra .B que estoy apuntando a blanco" no "Cuando señalo una .bar, la hago blanca".

Cuestiones relacionadas