Traiter le survol de la souris sur deux divisions

**apt** · 09/05/2011, 19h37

Bonjour à tous,

J'aimerais pouvoir traiter le survol de la souris sur 2 DIV's avec jquery.

http://majallati.comli.com/test/div3hover/d3h6.php

En premier temps, les deux premiers titres (h3) dans (DIV1 et DIV2) sont sélectionnés.

Quand la souris survole le deuxième titre (h3) dans DIV2, ce dernier est sélectionné, mais le premier titre dans DIV1 perd sa sélection et il n'a pas pu retenir sont état initial.

Comment faire pour que le premier titre (h3) dans DIV1 reste sélectionné ?

Merci.

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Tab verticales</title>
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" />
	<style type="text/css" media="screen">
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	.articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		.articles h3, .articles h3 a {color: #900; }
		/*.hasJS .articles {min-height:200px;}*/
		.hasJS .articles h3 {
			cursor: pointer;
			background-color: #999;
			margin: 0;
			padding: 5px;
			border-bottom:  #fff 1px solid;
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS .articles h3.selected {
		background-color: #E5E5E5;
		border-right: #fff 1px solid;
	}
		.hasJS .articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style>
	<script type="text/javascript">
		document.documentElement.className+=" hasJS";
	</script>
</head>
 
<body>
	<h1>Tab verticales</h1>
	<h2>Une série de h3 en tab horizontales</h2>
	<div class= "articles" id="articles_1">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
		</div>
		</div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
	<br /><br />
	<div class= "articles" id="articles_2">
		<div class="article">
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
			<div class="montre">
				<img class="imag"src="news1.jpg" alt="Figure 1" />
			</div>
		</div>
		<div class="article">
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3>
			<div>
				<img class="imag" src="news2.jpg" alt="Figure 2" />
		</div>
		</div>
		<div class="article">
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
			<div>
				<img class="imag" src="news3.jpg" alt="Figure 3" />
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.5.2.js"></script>
	<script type="text/javascript">
			$(document).ready( function () {
				//tabindex pour la navigation au clavier
				$(".articles h3").attr("tabindex", "0");
				$(".articles h3").focus (
					function () {
						//trucs à faire pendant le focus sur les h3
						$(".articles div.montre").removeClass("montre");
						$(".articles h3.selected").removeClass("selected");
						$(this).next("div").addClass("montre");
						$(this).addClass("selected");
					}
				);
				//
				//
				$('.articles').hover(function(){   
					var num = $(this).attr('id').substr(9); // fin de l'id à partir du 10e caractère   
					if ( /^[0-9]{1,4}$/.test(num) ) { // on continue uniquement si on a récupéré un nombre     
						var $articles = $('articles_' + num); // on récupère le DIV correspondant au AREA survolé 
						// on fait ce qu'on veut avec 
						$articles.focus();
 
					// gestion des hover sur les h3 :
						$("div.article h3").hover(
							function () {
								//trucs à faire pendant le over sur les h3
								$(".articles div.montre").removeClass("montre");
								$(".articles h3.selected").removeClass("selected");
								$(this).next("div").addClass("montre");
								$(this).addClass("selected");
							},
							function () {
								//out : trucs à faire éventuellement quand le pointeur sort du h3
							}
						);
					} 
				}
				);
				//
 
			});
	</script>
</body>
</html>

**danielhagnoul** · 09/05/2011, 23h05

Bonsoir

Gestion anarchique et répétitive sur le même élément du DOM (focus et hover) et imbrication inutile de hover() = code incompréhensible.

La méthode hover() est équivalente à la méthode mouseenter() plus la méthode mouseleave().

J'ai remplacé vos codes jQuery par le juste nécessaire pour répondre à la question posée.

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Tab verticales</title> 
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" /> 
	<style type="text/css" media="screen"> 
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	.articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		.articles h3, .articles h3 a {color: #ebfff3; }
		/*.hasJS .articles {min-height:200px;}*/
		.hasJS .articles h3 {
			cursor: pointer;
			background-color: #36425a;
			margin: 0;
			padding: 5px;
			border-bottom:  #fff 1px solid;
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS .articles h3.selected {
		background-color: #7385a3;
		border-right: #fff 1px solid;
	}
		.hasJS .articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style> 
	<script type="text/javascript"> 
		document.documentElement.className+=" hasJS";
	</script> 
</head> 
<body> 
	<h1>Tab verticales</h1> 
	<h2>Une série de h3 en tab horizontales</h2> 
	<div id="articles_1" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="http://majallati.comli.com/test/div3hover/news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="http://majallati.comli.com/test/div3hover/news2.jpg" alt="Figure 2" /> 
		</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="http://majallati.comli.com/test/div3hover/news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
	<br /><br /> 
	<div id="articles_2" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="http://majallati.comli.com/test/div3hover/news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="http://majallati.comli.com/test/div3hover/news2.jpg" alt="Figure 2" /> 
		</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="http://majallati.comli.com/test/div3hover/news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript"> 
        $(function(){
            $(".article").children("h3").mouseenter(function(){
                var objParentArticles = $(this).closest(".articles");
 
                objParentArticles.find("div.montre").removeClass("montre");
                objParentArticles.find("h3.selected").removeClass("selected");
 
                $(this).next("div").addClass("montre");
                $(this).addClass("selected");
            });
        });
	</script> 
</body> 
</html>
 
<!-- www.000webhost.com Analytics Code -->
 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
 
<!-- End Of Analytics Code -->

Je n'ai pas corrigé les codes HTML et CSS, mais il y a des lourdeurs et des choses bizarres à mon goût.

**apt** · 10/05/2011, 11h54

Bonjour danielhagnoul,

Ca marche très bien avec peut de code

C'est vraiment génial

Envoyé par danielhagnoul

Je n'ai pas corrigé les codes HTML et CSS, mais il y a des lourdeurs et des choses bizarres à mon goût.

Je vois que tu as remarqué plusieurs erreurs dans le code

Peux-tu me les citées ?

A propos de ce code :

Code :

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

1
2
3
<script type="text/javascript"> 
		document.documentElement.className+=" hasJS";
	</script>

Puis-je l'éliminer ?

Une petite question :

Sous la troisième h3 il y a une ligne blanche de trop.

Comment dire à jquery d'enlever cette ligne si la troisième h3 est sélectionnée ?

Merci.

**danielhagnoul** · 10/05/2011, 21h38

Bonsoir

Sans le JavaScript il n'y a pas de jQuery et pas d'animation. Donc...

La lourdeur est au niveau de la conception de la page dans sa totalité. Alors qu'il n'y a de la place que pour une image à la fois dans la division ayant la classe articles on réserve de la place à coups de divisions pour trois.

Une page web doit être un ensemble harmonieux, si votre code HTML et CSS est inutilement complexes les méthodes JavaScript le seront probablement aussi.

Il faudrait reprendre cette page à partir de zéro; mais je n'ai pas le temps pour cela.

**apt** · 13/05/2011, 16h22

Bon voila l'exemple d'ou j'ai commencé :

http://lombre.net/tests/tab-verticales/

Traiter le survol de la souris sur deux divisions

jQuery

Vue hybride

Discussions similaires

Partager

Partager