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

【问题标题】：Hide / show content via CSS:hover (or JS if need be)通过 CSS:hover 隐藏/显示内容（或 JS，如果需要）
【发布时间】：2011-02-18 01:11:46
【问题描述】：

我有以下html：

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

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

当鼠标滑过<li> 容器时，隐藏one 并显示two 的最简单方法是什么，最好只使用CSS。

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

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

【问题讨论】：

标签： jquery html css mouseover rollover

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

注意，这不适用于 IE6。但是，条件注释可以包含此特定实例的 Javascript。

【解决方案3】：

仅 CSS：

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

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

【讨论】：

【解决方案4】：

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

未测试，但试一试

【讨论】：

【解决方案5】：

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

【讨论】：

代理会确保所有未来创建的 ul/li 都会被绑定吗？
在这个例子中，它确保所有未来在 ul 中创建的 li 都将被绑定。