selecteurs jQuery hover sur li

Version imprimable

Bonjour,
je bloque sur une erreur de sélecteurs que je ne comprend pas du tout.
Je veux que lorsque la souris est sur un <li> une image (dans le <li>) s'affiche.

voici mon javascript

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
 
<li id="notificationsPanel">
<div id="NbNotif" class="">1</div>
<a href="#" class="notifications active">Notifications</a>
<div class="subpanel" style="display: block; height: auto; ">
<h3><span> – </span>Notifications</h3>
<ul id="notificationsPanelItem" style="height: auto; ">
<li class="view" style="visibility: hidden; ">
<a href="#" class="">View All</a>
</li>
<li>
<a href="#" class="delete"></a>
<a href="http://monsite.com" class="linknot">
<img src="/profile-photo.jpg" alt="Francis Kuntz" height="50" width="50" id="picturenot">
<div id="Notif">
<div id="texteNotif">
<div>	
<span class="colorname">Francis Kuntz</span> à manger des chips avec du jambon tout crue qui pue c est la mort...							</div>
</div>
<div id="metaNotif">
<img src="/ico_linkedin.png" alt="LinkedIn" height="16" width="16" id="tinynot">
<span class="date">17 novembre 2012</span>
</div>
</div>
</a>	
</li></ul></div></li>

et voici comment je gère le sélecteur:

Code:

1
2
3
4
5
6
 
$("#notificationsPanelItem li").hover(function() {
	$(this).css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
	$(this).css({'visibility': 'hidden'}); //Hide delete icon on hover out
});

en faisant des tests, il n'y a que le premier élèment <li> qui se sent concerné.
Comment est ce que je peux faire pour ne sélectionner que le <li> ou je suis positionné?

Merci pour les réponses

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
<script type="text/javascript">
$(function(){
$("#foo li").hover( function(){ $(this).css({"color":"red"}) }, function(){ $(this).css({'color':'black'})})             
   });
</script>
 
 
 
</head>
<body>
 
<ul id="foo">
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
<li>hop</li>
</ul>
</body>
</html>

tous les lis sont affectés ...

le souci provient donc de la propriété de style display

06/03/2012, 11h51
Golgotha
Galere05,

J'ai l'impression que dans ton code tu utilise mal les balise

Code:

<ul>

et

Code:

<li>

exemple :
Code:

1 2 3 4 5 6 <ul> <li>rouge</li> <li>noir</li> <li>blanc</li> <li>rose</li> </ul>
ul encapsule les li et pas l'inverse.

li = élément de la liste.
06/03/2012, 12h00
Galere05

Peut etre une maladresse de ma part.
Mais quand on imbrique des listes, on met un seul <ul>?
06/03/2012, 12h06
Golgotha

Ce qui me choque c'est que ton code commence par la balise li mais peut être que je me trompe.
06/03/2012, 12h16
Galere05

Ce n'est qu'une partie du code,
j'ai bien un <ul> qui englob le tout.