通过CSS隐藏/显示内容：hover（或JS，如果需要）

我有以下html：

 Stuff here More stuff 
 .one { display: block; } .two { display: none; } 

当鼠标滚过

容器时，隐藏one并显示two最简单的方法（最好只有CSS）是什么。

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

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

Answer 1

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

Answer 2

仅限CSS：

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

Answer 3

完全未经测试，您可能希望使用fadeIn（）和fadeOut（），或使用更好的类（两个跨度应该具有相同的类，但ID不同）。 这是一个jQuery示例来执行此操作：

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

Answer 4

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

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

Answer 5

 
 Stuff here More stuff 
​ 

js在它之后

最后，css部分

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

未经测试，但试一试