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

Version imprimable

22/03/2011, 21h12
vinze60

Mon style :hover disparait lorsque j'utilise .css de JQUERY
Bonjour à tous,

Voilà mon code JS :
Code:

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:

1 2 3 4 5 6 7 8 li{ color:white; } li:hover{ color:black; }
Et mon code HTML :
Code:

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

Bonsoir

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

Code:

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>

bonsoir,

essayez ceci pour le hover:

Code:

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

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:

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:

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 }); });

25/03/2011, 17h34
tresorunikin

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