Mouse events sur un element css hidden

**SpaceFrog** · 06/03/2012, 14h30

C'est moi ou mes teste montrent que l'on ne pêut pas faire de mouseneter mousover hover etc sur des elements en css visibility:hidden ????
La doc Jquery semble dire le contraire

**NoSmoking** · 06/03/2012, 14h46

Bonjour,
les éléments en visibility:hidden ne sont pas retirés du flux mais ne sont pas affichés et ne reçoivent pas les événements.

Il est préférable de jouer avec l'opacity.

**SpaceFrog** · 06/03/2012, 14h56

Pas beaucoup plus de succès avec opacity ?

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
<script type="text/javascript">
$(function(){
$("#foo li").mouseover( function(){ $(this).css({"opacity":0})} , function(){ $(this).css({'opacity':100})} )             
 
   });
</script>
 
<style type="text/css">
 
</style>
</head>
<body>
 <ul id="foo" style="border:solid 1px red;">
<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>
<div id="bar">lkjlkj</div>
</body>
</html>

Et si je fais juste opacity le premier li perd même sa puce ... ???

**Yann39** · 06/03/2012, 15h12

Essai avec hover().
Et opacity je crois que c'est entre 0 et 1.

Pour moi ca fonctionne : http://jsfiddle.net/ua4Mq/

**NoSmoking** · 06/03/2012, 15h12

autant passer par la méthode hover qui gère l'entrée et la sortie

Code :

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

1
2
3
4
5
6
7
$(function(){
  $("#foo li").hover( function(){
      $(this).css({"opacity":0})
    }, function(){
      $(this).css({'opacity':1})
    })
  });

ou alors il faut gérer mouseover et mouseout

Code :

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

1
2
3
4
5
6
7
$(function(){
  $("#foo li").mouseover( function(){
      $(this).css({"opacity":0})
    }).mouseout( function(){
      $(this).css({'opacity':1})
    })
  });

**SpaceFrog** · 06/03/2012, 15h18

oui mon code de depart était en hover ...

il y a du progrès sauf que sous IE je perds la première puce

**NoSmoking** · 06/03/2012, 15h54

Envoyé par SpaceFrog

il y a du progrès sauf que sous IE je perds la première puce

IE a toujours était un problème avec les puces des listes.

Les puces ne faisant pas partie du DOM, IE ne les rattaches pas ou mal dans ce cas.

Il existe une solution qui consiste à mettre ton UL en display:inline-block.

Seulement dans ce cas il ne fait plus apparaître le disc donc il faut ajouter un padding-left:1.0em par exemple.

Le rendu restera différent, ou légèrement, sur les différent navigateurs.

Mouse events sur un element css hidden

jQuery

Vue hybride

Discussions similaires

Partager

Partager