web-dev-qa-db-fra.com

Le sélecteur de survol CSS pour la couleur de fond ne fonctionne pas après un changement dynamique de couleur de fond avec jquery

Je change dynamiquement la couleur d'arrière-plan d'une div avec la méthode jquery .css(). Je veux aussi avoir un sélecteur CSS hover sur cette même div qui change la couleur de fond. Il semble qu'avant le changement de couleur avec jquery, le sélecteur CSS hover fonctionne, mais après que la div ait été modifiée avec la méthode jquery, le sélecteur CSS hover ne fonctionne plus. Existe-t-il un moyen de contourner ce problème (sans utiliser la méthode jquery hover)?

Voici un exemple de ce dont je parle: http://jsfiddle.net/KVmCt/1/

jquerycsshover
21
Justin Meltzer

Le problème que vous rencontrez est l’importance de l’emplacement des informations CSS:

Une feuille de style externe est remplacée par CSS en tête du document. qui est, à son tour, remplacé par CSS dans l'attribut style de l'élément. Fondamentalement, le dernier style rencontré par le navigateur annule les règles spécifiées précédemment et les règles autrement conflictuelles (à moins que le mot clé !important ne soit utilisé).

Comme JavaScript, et donc jQuery, place ses informations CSS/styling dans l'attribut style en ligne de l'élément this always remplace les styles en conflit spécifiés ailleurs.

La place plus importante sur le color: red pour la div, en ignorant les styles div:hover.

Pour contourner ce problème, vous pouvez utiliser:

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

JS Fiddle démo .

Une meilleure solution consiste toutefois à éviter d'attribuer le style background-color/à d'autres styles avec jQuery et à utiliser simplement CSS:

div {
    background-color: red;
}

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

Vous pouvez également utiliser la méthode hover() de jQuery:

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

JS Fiddle démo .

43
David Thomas

La méthode jquery css ajoute un style en ligne à vos éléments, ce qui signifie qu'après son exécution, votre div ressemblera à 

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

Maintenant, le style en ligne a toujours plus de priorité que le style css, d’où votre problème.

Alors, pourquoi ne pas ajouter une classe CSS au lieu d'utiliser un style inline? Essayez avec ce qui suit:

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

et 

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

div.edited {
   background-color: red;
}

et vous verrez que cela fonctionne.

7
StefanoP

si vous avez juste besoin de supprimer le style en ligne, vous pouvez utiliser

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

Il remplacera votre style en ligne par style=" "

2
Tristan

Lorsque vous manipulez css avec jQuery, il l'ajoute en ligne et remplace tout css d'une feuille de style. Essayez d'utiliser jquery pour ajouter et supprimer une classe qui modifie la couleur au survol. Voici le violon qui fonctionne: http://jsfiddle.net/KVmCt/6/

jQuery ressemble à ceci:

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

Un moyen simple serait d'ajouter la balise importante à votre CSS.

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