当悬停时,Jquery显示/隐藏

你好！你好吗？
我需要一个关于问题的演示示例。我是新来的，不能让我的头围绕它。

我有三个链接，猫，狗，蛇。当我将鼠标悬停在每个链接上时，每个链接的内容都应该改变。

所以，如果我将鼠标悬停在猫上，那么猫的内容将会出现，如果我将鼠标悬停在猫上，猫的内容会顺利消失，狗的内容会出现…等等。

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>

我如何得到这个完整的工作，有一些光滑的衰落？

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