Hide / show content via CSS:hover (or JS if need be)

Question

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

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

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.

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

score 11 · Answer 1 · answered May 11 '10 at 08:57

11

CSS only:

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

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

answered May 11 '10 at 08:57

Ikke

99,403
23
97
120

score 6 · Accepted Answer · answered May 11 '10 at 08:59

6

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

answered May 11 '10 at 08:59

jAndy

231,737
57
305
359

Will the delegate ensure that all future ul/li's created in the future will be bound? – Chris May 11 '10 at 09:09
it ensures that all future created li's in a ul will be bound, in this example. – jAndy May 11 '10 at 09:44

score 2 · Answer 3 · answered May 11 '10 at 08:56

Completely untested, and you might want to use fadeIn() and fadeOut(), or use better classes (both spans should have the same class, but different ID). Here is a jQuery sample to do this:

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

score 2 · Answer 4 · answered May 11 '10 at 08:57

2

Depending on the browsers you wish to support, this can be achieved by:

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

answered May 11 '10 at 08:57

Tim Ebenezer

2,714
17
23

Note, this would not work with IE6. However a conditional comment could include Javascript for this particular instance. – Tim Ebenezer May 11 '10 at 08:58

choise · Answer 5 · 2010-05-11T09:04:35.927

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

js part after it

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

at last, the css part

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

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

untested, but give it a try

Hide / show content via CSS:hover (or JS if need be)

5 Answers5

Linked