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.

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

le coup du display et padding ne resoud pas le souci de la puce,
je triche et ajoutant un span dans les lis

Merci pour ces eclaircissements sur les puces

**NoSmoking** · 06/03/2012, 18h38

Envoyé par SpaceFrog

le coup du display et padding ne resoud pas le souci de la puce,

cela me surprend, mais quoiqu'il arrive la solution du rajout before reste une solution full cross-browser

**SpaceFrog** · 07/03/2012, 08h24

wrap... pour moi, je vois pas comment tu fais avec le before ?

**SpaceFrog** · 07/03/2012, 09h12

Pour info je suis obligé de passer pas wrapInner, mais le hover ne fonctionne vraiment correctement que sur le texte, pas sur la zone vide du span...

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
<script type="text/javascript">
$(function(){
$("#foo li").wrapInner('<span/>').find('span').hover( function(){ $(this).css({'opacity':0})},function(){$(this).css({'opacity':1})})
});
</script>
</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>

J'ai des scintillement avec
hover
mouseover / mouseout
mousenter / mouseleave

**NoSmoking** · 07/03/2012, 14h55

quand je parlais de before j'entendais mettre devant le texte du LI la puce sous forme d'image, c'est de loin la méthode qui présente le meilleur rendu quelque soit le navigateur en attendant mieux.

cela donne par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
  $('#foo li')
    .mouseover( function(){
      $(this).css({'opacity':0})
    })
    .mouseout( function(){
      $(this).css({'opacity':1})
    })
    // ajout d'une image
    .prepend('<img src="http://maps.google.com/mapfiles/kml/pal3/icon61.png" style="vertical-align:middle">')
    // supprime le disc par défaut
    .css('list-style-type','none')
  });

**SpaceFrog** · 07/03/2012, 15h07

prepender une image devant un li .. ?
ha oki du coup il faut virer le list style type ou le mettre en position inside et l'image remplace la puce

Avec mon innerWrap les puces restent visible ... après c'est une question de rendu ...
mais j'ai toujours ce souci de scintillement quand le curseur n'est pas sur le texte

**NoSmoking** · 07/03/2012, 15h49

...mais j'ai toujours ce souci de scintillement quand le curseur n'est pas sur le texte

mets un background-color:#fff;, par exemple à tes LI

Mouse events sur un element css hidden

jQuery

Discussions similaires

Partager

Partager