Priorité de couleur de fond de couleur CSS

Je suis en train de changer les couleurs d'une ligne de tableau en vol stationnaire avec jQuery et j'ai remarqué que dans les cas suivants, j'obtiens des résultats différents.Priorité de couleur de fond de couleur CSS

Le CSS est la suivante:

.normalcolor { 
    background-color: #dedede; 
} 
.reddishcolor { 
    background-color: #ffc59c; 
} 
.hovercolor { 
    background-color: #f1e1c0; 
}

Maintenant, je fais l'effet de vol stationnaire avec jQuery, en utilisant ce code:

$("table.withhover tr").hover(function(){ 
    $(this).addClass("hovercolor"); 
}, function(){ 
    $(this).removeClass("hovercolor"); 
});

La chose étrange est que lorsque je passe la souris sur une ligne avec class="normalcolor", la couleur d'arrière-plan change à celle de .hovercolor. Cependant, lorsque je survole une ligne avec class="reddishcolor", la couleur d'arrière-plan ne change pas.

Est-ce normal? Et si oui, pourquoi? Cela a quelque chose à voir avec les couleurs?

Merci!

Source

2010-08-14 Alex

vous avez peut-être un problème table.withhover? pouvez-vous nous donner un exemple en direct sur jsbin.com? – Sotiris

Si vous vérifiez ce jsfiddle: http://jsfiddle.net/wyZem/, vous verrez l'exemple simple fonctionne comme vous l'avez décrit. Notez également que vous pouvez nettoyer votre gestionnaire d'événements hover avec la méthode toggleClass. – Pat

@Sotiris le problème était dans les déclarations CSS. Voir la réponse acceptée. Merci quand même! – Alex

Avez-vous spécifié les classes CSS exactement dans cet ordre ou la classe .reddishcolor a-t-elle été spécifiée en dernier?

Lorsque plusieurs styles s'appliquent à un élément, la règle la plus spécifique est utilisée. Si les règles sont également spécifiques (comme dans votre cas), la dernière règle est utilisée.

Si vous ne pouvez pas modifier l'ordre des règles CSS, vous pouvez faire le par exemple la classe de vol stationnaire plus spécifique, en spécifiant le nom de l'élément aussi:

tr.hovercolor { 
    background-color: #f1e1c0; 
}

Source

2010-08-14 13:31:28 Guffa

C'était ça. Merci! – Alex

Vous devez supprimer l'ancienne classe CSS qui définit la couleur par défaut, puis ajouter la nouvelle classe qui définit la couleur de vol stationnaire:

$().hover(function() 
{ 
    $(this).removeClass("default-color-class").addClass("hover-color-class"); 
});

... Ou vous pourriez jouer avec le mot-clé !important CSS, pour faire prendre votre classe de couleur de vol stationnaire priorité sur d'autres classes attachées à un élément:

.hover-state { color: #fff !important; }

Note: Le mot-clé !important est pas pris en charge par IE6 et FireFox 1.X.

... Ou vous pourriez être plus précis dans votre portée de votre classe de couleur de vol stationnaire:

.default-state { ... }; 
table .hover-state { ... }; /* more specific rules override less specific ones */

Source

2010-08-14 13:32:06 roosteronacid

Priorité de couleur de fond de couleur CSS

Répondre

Questions connexes