11548 sujets

JavaScript, DOM et API Web HTML5

Peut-on faire un hover sur un li

Bonjour,

la fonction hover marche sur <a>, mais ne semble pas marcher en survolant un <li>

J'ai mon menu horizontal en html :


<ul class="menu">
     <li title="Onglet 1"><a href="#">Onglet 1</a>
     <em>Test onglet 1</em>
     </li>
     <li title="Onglet 2">Onglet 2
     <em>Test onglet 2</em>
     </li>
</ul>


le javascript 


/*AFICHAGE <EM> EN SURVOLANT <A>*/
$(' .menu em ').hide(); 
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
 $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});


Le code qui ne marche pas :



/*AFICHAGE <EM> EN SURVOLANT <A>*/
$(' .menu em ').hide(); 
$(".menu li").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
 $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});



Bonne journée
Merci de me dire si une solution existe sans passer par la mise en place d'un lien.
petite erreur, le code qui ne marche pas :

/*AFFICHAGE <EM> EN SURVOLANT <LI>*/

$(' .menu em ').hide(); 
$(".menu li").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
Hello,

Le hover sur les li devrait marcher.

Utilises plutôt la méthode find au lieu de next.
Next cherche l'élement suivant alors que find cherche les élements enfants.


$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
Ce n'est pas next() qu'il faut utiliser, mais dans ce cas soit : child('em') ou find('em).

next() va chercher l'élément suivant une fois la li fermée.

EDIT : grilled Smiley cligne
Modifié par vincentD83 (29 Sep 2011 - 11:42)
Administrateur
Bonjour,

IE6 a un problème avec :hover (voir http://www.quirksmode.org/css/contents.html#t16 ).
Attention aux styles CSS et évènements JS qui ne concernent que la souris : il faut bien penser à les doubler par leur équivalent clavier (:focus pour CSS MAIS seuls les éléments de formulaire et liens peuvent par défaut acquérir le focus, pas un li ou un div). Voir par ex. http://www.braillenet.org/accessibilite/referentiel-aw21/liste-deploye.php#crit-7-3 et 10.7
Sujet clos
Aller à