selecteurs jQuery hover sur li

**Galere05** · 06/03/2012, 11h41

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 :

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
 
<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 :

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

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

**SpaceFrog** · 06/03/2012, 11h47

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
<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

**Golgotha** · 06/03/2012, 11h51

Galere05,

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

Code :

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

<ul>

et

Code :

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

<li>

exemple :

Code :

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

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.

**Galere05** · 06/03/2012, 12h00

Peut etre une maladresse de ma part.
Mais quand on imbrique des listes, on met un seul <ul>?

**Golgotha** · 06/03/2012, 12h06

Ce qui me choque c'est que ton code commence par la balise li mais peut être que je me trompe.

**Galere05** · 06/03/2012, 12h16

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

selecteurs jQuery hover sur li

jQuery

Discussions similaires

Partager

Partager