Traiter le survol de la souris sur deux divisions
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:
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> |
