通过CSS隐藏/显示内容:悬停(或JS,如果需要)

Question

我有以下html:

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

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

当鼠标滚过容器时,隐藏one和显示什么是最简单的方法,最好是CSS .two<li>

如果这不能通过CSS和Javascript完成,我更喜欢jQuery,live()因为内容是实时更新的,不希望不断手动重新绑定.

编辑: 我忘了提到这必须在IE6中工作:/

Answer 1

仅限CSS:

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

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

Answer 2

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