JQuery show/hide when hover

jayjay picture jayjay · Mar 23, 2011 · Viewed 100.1k times · Source

I have three links, Cat, Dog, Snakes. When I hover over each, the content relating to each link should change.

So if i hover over cat, then cat content will appear, if i hover over dog the cat content will smoothly disappear and the dog content will appear... and so on.

Links are: Dog   Cat  Snake
<div>
  <span style="display:none;"> Cat Content</span>
  <span style="display:none;"> Dog Content</span>
  <span style="display:none;"> Snake Content</span>    
</div>

How do I get this to be full blown working, with some smooth fading?

Answer

Vivek picture Vivek · Mar 23, 2011
('.cat').hover(
  function () {
    $(this).show();
  }, 
  function () {
    $(this).hide();
  }
);

It's the same for the others.

For the smooth fade in you can use fadeIn and fadeOut