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!

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager