悬停时JQuery显示/隐藏

Question

我有三个链接,猫,狗,蛇.当我将鼠标悬停在每个链接上时,与每个链接相关的内容应该更改.

因此,如果我将鼠标悬停在猫身上,那么猫的内容将会出现,如果我将鼠标悬停在狗身上,猫的内容将会顺利消失,狗的内容将会出现......依此类推.

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>

如何让这个完全成熟,有一些平滑的褪色？

Answer 1

('.cat').hover(
  function () {
    $(this).show();
  }, 
  function () {
    $(this).hide();
  }
);

对其他人来说也是如此.

为了顺利淡入,你可以使用fadeIn和fadeOut

Answer 2

jQuery的:

$('div.animalcontent').hide();
$('div').hide();
$('p.animal').bind('mouseover', function() {
    $('div.animalcontent').fadeOut();
    $('#'+$(this).attr('id')+'content').fadeIn();
});  

HTML:

<p class='animal' id='dog'>dog url</p><div id='dogcontent' class='animalcontent'>Doggiecontent!</div>
<p class='animal' id='cat'>cat url</p><div id='catcontent' class='animalcontent'>Pussiecontent!</div>
<p class='animal' id='snake'>snake url</p><div id='snakecontent'class='animalcontent'>Snakecontent!</div>

-编辑-

是的,在这里你去 - JSFiddle

Answer 3

我希望我的脚本可以帮到你.

<i class="mostrar-producto">mostrar...</i>
<div class="producto" style="display:none;position: absolute;">Producto</div>

我的剧本

<script>
$(".mostrar-producto").mouseover(function(){
     $(".producto").fadeIn();
 });

 $(".mostrar-producto").mouseleave(function(){
      $(".producto").fadeOut();
  });
</script>