Discussion :

[tmlpqsdpmdlc]

Bonsoir,

Lorsque j'appelle $(this).parent().css pour changer le background-color de la balise de classe="selection", son hover disparait alors que j'aimerai qu'il reste.
Le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="selection">
        <span class="type-a">Attaque</span>
</div>

Le Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$('span[class|="type"]').click(function(){
	if($(this).attr("class")=="type-b"){
		$(this).attr("class", "type-a");
		$(this).parent().css("background-color", "#fe0002");
	}
	else{
		$(this).attr("class", "type-b");
		$(this).parent().css("background-color", "#fe6400");
	}		
});

Le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.selection{
        background-color: #fe0002;
}
.selection:hover{
	background-color: #fe0064;
}

Comment puis-je faire pour parer cela ?

Merci de votre aide

[Bovino]

Tout d'abord, pour gérer les classes avec jQuery, il ne faut pas utiliser .attr('class') mais les méthodes spécifiques (plus performantes) : .hasClass(), .toggleClass(), .addClass() et .removeClass().

Ensuite, ce qui se produit est logique : lorsque tu utilises .css(), cela ajoute des styles inline (attribut style) qui sont prioritaires sur les styles définis sur les balises <style> ou les feuilles de style externes.
L'idéal serait donc de créer des classes spécifiques pour les différentes couleurs et une autre pour le survol.