通过CSS隐藏/显示内容：悬停（或JS，如果需要的话） [英] Hide / show content via CSS:hover (or JS if need be)

问题描述

我有以下html：

I have the following html:

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

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

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

What is the easiest method, preferably CSS only, to hide one and show two when the mouse rolls over the <li> container.

如果这不能通过CSS和Javascript完成，那么我会通过类似于 live（）的方式来使用jQuery，因为内容是现场更新，不希望经常手动重新绑定。

If this cannot be done via CSS and only Javascript, I would prefer jQuery via something like live() as the content is updated live and do not wish to constantly rebind manually.

编辑： b 我忘记提及这必须在IE6中工作：/ $ / $> $（'ul'）。

I forgot to mention that this has to work in IE6 :/

推荐答案

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

这篇关于通过CSS隐藏/显示内容：悬停（或JS，如果需要的话）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！