Hide / Show Content Via Css:hover (or Js If Need Be)

I have the following html:

Stuff hereMore stuff

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

Solution 1:

CSS only:

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

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

Solution 2:

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

Solution 3:

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

Solution 4:

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

Solution 5:

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

js part after it

<scripttype="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(newRegExp(" 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