通过css:hover(或JS,如果需要)隐藏/显示内容

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

仅CSS:

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

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

完全未测试,您可能希望使用fadein()和fadeout(),或者使用更好的类(两个跨度应该具有相同的类,但ID不同)。下面是jquery示例:

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

根据您希望支持的浏览器,可以通过以下方式实现:

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

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

后面的JS部件

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

最后,CSS部分

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

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

未经测试,但尝试一下