Mouse events sur un element css hidden

Version imprimable

06/03/2012, 14h30
SpaceFrog

Mouse events sur un element css hidden

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 :(
06/03/2012, 14h46
NoSmoking

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.

Pas beaucoup plus de succès avec opacity ?

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

06/03/2012, 15h12
Yann39

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

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

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

Code:

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:

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

06/03/2012, 15h18
SpaceFrog

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

il y a du progrès sauf que sous IE je perds la première puce 8O
06/03/2012, 15h54
NoSmoking

Citation:

Envoyé par SpaceFrog

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

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.
06/03/2012, 15h59
SpaceFrog

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
06/03/2012, 18h38
NoSmoking

Citation:

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 ;)
07/03/2012, 08h24
SpaceFrog

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

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:

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

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:

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') });

07/03/2012, 15h07
SpaceFrog

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
07/03/2012, 15h49
NoSmoking

Citation:

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