Selector de desplazamiento CSS para el color de fondo no funciona después del cambio dinámico de color de fondo con jquery

Question

Cambio dinámicamente el color de fondo de un div con el método jquery .css(). También quiero tener un selector CSS hover en ese mismo div que cambie el color de fondo. Parece que antes de cambiar el color con jquery, el selector CSS hover funciona, pero después de que el div se cambia con el método jquery, el selector CSS hover ya no funciona. ¿Hay alguna forma de evitar esto (sin usar el método jquery hover)?

Este es un ejemplo de lo que estoy hablando: http://jsfiddle.net/KVmCt/1/

Answer 1

El problema que estás experimentando es la importancia de la localización de la información CSS:

Una hoja de estilo externa está sobre-gobernado por CSS en el encabezado del documento; que, a su vez, está sobrerregulado por CSS en el atributo style del elemento. Básicamente, el último estilo encontrado por el navegador anula cualquier regla previamente especificada y conflictiva (a menos que se use la palabra clave !important).

como JavaScript, jQuery y por lo tanto, pone su información de CSS/estilo en el style atributo en línea del elemento de esta siempre anulaciones en conflicto estilos especificados en otra parte.

Los lugares más importantes en el color: red para el div, sin tener en cuenta los estilos div:hover.

Para evitar que, puede utilizar:

div:hover { 
    background-color: blue!important; 
} 

JS Fiddle demo.

Una mejor solución, sin embargo, es evitar la asignación de los/otros background-color estilos con jQuery, y simplemente usar CSS:

div { 
    background-color: red; 
} 

div:hover { 
    background-color: blue!important; 
} 

Como alternativa, se puede usar hover() método de jQuery:

$('div').css('background-color','red').hover(
    function(){ 
     $(this).css('background-color','blue'); 
    }, 
    function(){ 
     $(this).css('background-color','red'); 
    }); 

JS Fiddle demo.

Answer 2

Al manipular CSS con jQuery añade que en línea y anula cualquier css en una hoja de estilo trate de usar jQuery para añadir y eliminar una clase que cambia la color en vuelo estacionario Aquí está el violín de trabajo: http://jsfiddle.net/KVmCt/6/

jQuery se ve así:

$("div").hover(
function(){ 
$(this).addClass("blue"); 
} 
, 
function(){ 
$(this).removeClass("blue"); 
}); 

Answer 3

El jQuery css método agrega un estilo en línea a sus elementos, lo que significa que después de la ejecución, su div se verá como

<div style="background-color: red">Hello world</div>` 

Ahora, el estilo en línea siempre tiene más prioridad que el estilo css, de ahí su problema.

Entonces, ¿por qué no agregar una clase css en lugar de usar estilos en línea? Intenta con el siguiente:

$("div").addClass("edited"); 

y

div:hover, div.edited:hover { 
    background-color: blue; 
} 

div.edited { 
    background-color: red; 
} 

y verá que funciona.

Answer 4

Una manera simple sería agregar la etiqueta importante a su CSS.

div:hover { 
    background-color: blue !important; 
}; 

Answer 5

si sólo tiene que borrar el estilo en línea que puede utilizar

$("#yourselector").attr("style", " "); 

que reemplazará a su estilo en línea con style=" "