Cacher/montrer le contenu via CSS: hover (ou JS si besoin)

Question

je le code HTML suivant:

<li> 
<span class="one">Stuff here</span> 
<span class="two">More stuff</span> 
</li> 

.one { display: block; } 
.two { display: none; } 

Quelle est la méthode la plus simple, de préférence CSS seulement, pour cacher one et montrer two lorsque la souris roule sur le conteneur <li>. Si cela ne peut pas être fait via CSS et seulement Javascript, je préférerais jQuery via quelque chose comme live() que le contenu est mis à jour en direct et ne souhaite pas constamment relier manuellement.

EDIT: j'oublié de mentionner que cela doit travailler dans IE6:/

Answer 1

$('ul').delegate('li', 'mouseenter', function(){ 
    $('.one').hide(); 
    $('.two').show(); 
}) 
.delegate('li', 'mouseleave', function(){ 
    $('.one').show(); 
    $('.two').hide(); 
}); 

Answer 2

complètement non testé, et vous pouvez utiliser fadeIn() et fadeOut(), ou utiliser de meilleures classes (les deux travées doivent avoir la même classe, mais une identité différente). Voici un exemple jQuery pour le faire:

$(document).ready(function(){ 
    $("li span") 
    .mouseOver(function(){ $(this).hide()) 
    .mouseOut(function(){ $(this).show()) 
}); 

Answer 3

En fonction des navigateurs que vous souhaitez soutenir, cela peut être réalisé par:

li .one { display: block; } 
li:hover .one { display: none; } 
li .two { display: none; } 
li:hover .two { display: block; } 

Answer 4

CSS seulement:

.one { display: block; } 
.two { display: none; } 

li:hover .one 
{ 
    display: none; 
} 
li:hover .two 
{ 
    display: block; 
} 

Answer 5

<li> 
<span class="one">Stuff here</span> 
<span class="two">More stuff</span> 
</li>​ 

js partie après elle

<script type="text/javascript"> 

sfHover = function() { 
    var sfEls = document.getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
    this.className+=" sfhover"; 
    } 
    sfEls[i].onmouseout=function() { 
    this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

</script> 

enfin, la partie css

.one { display: block; } 
.two { display: none; } 

li:hover .one, li.sfhover .one { display:none;} 
li:hover .two, li.sfhover .two { display:block;}​ 

non testé, mais essayer