Mon style :hover disparait lorsque j'utilise .css de JQUERY

vinze60 · 22/03/2011, 21h12

Bonjour à tous,

Voilà mon code JS :

Code :

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

1
2
3
4
5
6
7
$(function(){
$("li").click(function(){
$("li").css('color','#747474'); // Tout les li sont de tel couleur
$(this).css('color','black'); // Le li sélectionné devient de couleur noir
}); 
});

Mon CSS :

Code :

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

1
2
3
4
5
6
7
8
 
li{
color:white;
}
 
li:hover{
color:black;
}

Et mon code HTML :

Code :

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

1
2
3
4
5
6
7
 
<ul>
<li>premier</li>
<li>deuxième</li>
<li>troisième</li>
<li>quatrième</li>
</ul>

Le code JS fonctionne bien quand il s'agit de colorier et décoloriez mes li. Le principe étant de mettre en surbrillance le dernier li cliqué.

Cependant, dès que je fais mon premier click, le style CSS qui définit la couleur lorsqu'on passe la souris au dessus d'un li ne fonctionne plus.

Avez-vous une solution ?

D'avance merci

danielhagnoul · 24/03/2011, 22h17

Bonsoir

Sous réserve d'avoir bien compris la question, voici un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		li {color:green; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<ul>
			<li>premier</li>
			<li>deuxième</li>
			<li>troisième</li>
			<li>quatrième</li>
		</ul>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script>
		$(function(){
 
			$("li").hover(
				function(){
					$(this).css("color","blue");
				},
				function(){
					$(this).css("color","green");
				}
			);
 
			$("li").click(function(){
				$(this).css("color","red");
			});
 
		});
    </script>
</body>  
</html>

kamclasse · 24/03/2011, 23h31

bonsoir,

essayez ceci pour le hover:

Code :

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

1
2
3
4
5
6
7
8
9
 
 
$('class').hover(function () {
            $(this).css('background-color','#D2D2D2');
        },
        function () {
            $('class').css('background-color','#f5f6f7');
        }
    );

marcha · 25/03/2011, 08h42

Salut,

la methode .css() applique un style inline comme avec l'attribut style.

le fait de fixer l'attribut style inhibe les pseudo classes comme :hover
on peut le vérifier avec ce test dans ton code.

Code :

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

1
2
 
<li style='color: red'>premier</li>

Les solutions proposées par danielhagnoul et kamclasse redéfinissent
le comportement de la pseudo class avec des évènements et des fonctions
javascript.

Cependant si tu retire l'attribut color au lieu de le fixer tu retrouvera
le comportement de la pseudo class.

Code :

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

1
2
3
4
5
6
$(function(){
  $("li").click(function(){
  $("li").css('color',''); // Chaine vide, retire le style
  $(this).css('color','black'); // Le li sélectionné devient de couleur noir sans effet hover
}); 
});

tresorunikin · 25/03/2011, 17h34

Rassures-toi d'avoir placé le JS Code après le CSS dans le fichier!

25/03/2011, 17h34	#5
tresorunikin Membre habitué Inscription : septembre 2008 Messages : 161 Détails du profil Informations personnelles : Sexe : Localisation : Congo-Kinshasa Informations forums : Inscription : septembre 2008 Messages : 161 Points : 139 Points : 139	Rassures-toi d'avoir placé le JS Code après le CSS dans le fichier!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email