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