JQUERY, CSS, Lorsque vous passez la souris sur une LI, affichez une balise SPAN à l'intérieur?

Question

Compte tenu de ce qui suit:

ul li .main .meta {opacity:0;} 

<ul> 
<li> <span class="main">TITLE</span> <span class="meta">meta</span> </li> 
<li> <span class="main">TITLE 2 </span> <span class="meta">meta</span> </li> 
<li> <span class="main">TITLE 3</span> <span class="meta">meta</span> </li> 
etc... long list... 
</ul> 

Quel genre de magie JQUERY puis-je faire pour que chaque fois qu'un mouses utilisateur sur AnyWhere dans la LI, le SPAN avec la classe = META, les changements à Opacité: 1, et lorsque le l'utilisateur déplace sa souris de cette LI que méta de LI remonte à Opacité: 0, et la méta de la nouvelle LI va à Opacité 1. etc ....

Merci!

Answer 1

Il y a quelques problèmes ici. L'implémentation la plus simple est:

$("li").hover(function() { 
    $(this).find("span.meta").stop().fadeIn(); 
}, function() { 
    $(this).find("span.meta").stop().fadeOut(); 
}); 

qui fonctionnera en quelque sorte. Le problème est que les travées sont des éléments en ligne et fadeIn() va le transformer en un élément de niveau bloc.

Note: mettre en stop() il y a une bonne habitude à prendre, sinon vous pouvez obtenir des effets inattendus si vous tirez rapidement de plusieurs animations sur la même cible.

Vous pouvez le faire avec des classes trop:

$("li").hover(function() { 
    $(this).find("span.meta").removeClass("hidden"); 
}, function() { 
    $(this).find("span.meta").addClass("hidden"); 
}); 

avec:

span.hidden { display: none; } 

mais vous perdez le fade in et fade out effets de cette façon. Il résout cependant le problème display: block.

Vous pouvez alternativement animate() le opacity mais opacity n'est pas vraiment pris en charge sur IE. Voir opacity:

compatibilité IE note

Si vous voulez opacité de travailler dans toutes les versions IE , l'ordre doit être:

.opaque { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first! 
    filter: alpha(opacity=50);     // second! 
} 

Si vous ne l'utilisez pas cet ordre , IE8-as-IE7 ne s'applique pas l'opacité, bien IE8 et un IE7 pur.

Ce code ressemble à ceci:

$("li").hover(function() { 
    $(this).find("span.meta").stop().animate({opacity: 0.0}); 
}, function() { 
    $(this).find("span.meta").stop().animate({opacity: 1.0}); 
}); 

Une question à laquelle vous devez répondre est: voulez-vous le contenu « méta » de ne pas être rendu ou tout simplement ne pas être visible? Il y a une différence. Pour ne pas être rendu est comme display: none. Pour ne pas être visible est comme opacity: 0 qui pourrait potentiellement confondre l'utilisateur puisque le texte sera toujours sélectionnable. IMHO Je pense que vous feriez mieux d'accepter la nature de bloc de l'affichage ou d'utiliser une info-bulle (même une info-bulle riche) à la place.

Answer 2

$('ul li.main').mouseover(function(evt){ $(this).find('span.meta').show(); }); 

Je pense ...

Answer 3

Comme ceci:

$('li').hover(
    function() { $('span.meta', this).show(); }, 
    function() { $('span.meta', this).hide(); } 
}); 

Par ailleurs, la bonne façon de cacher un élément en CSS est d'utiliser soit visibility: hidden (si vous voulez occuper l'espace) ou display:none (si vous ne voulez pas pour occuper de l'espace)

Answer 4

La mise en œuvre la plus simple est purement la CSS;

ul li .meta {opacity:0;} 
ul li:hover .meta {opacity:1;} 

Il ne fera aucun effet de fondu entrant/sortant, mais il atteint votre objectif. L'utilisation de l'affichage ou de la visibilité, selon que vous voulez ou non que le texte affecte la mise en page lorsqu'elle n'est pas visible, peut être souhaitable pour l'opacité du point de vue du support du navigateur.