悬停时jQuery显示/隐藏 [英] JQuery show/hide when hover

问题描述

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

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?

推荐答案

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

其他都一样.

要获得平滑的淡入效果，可以使用fadeIn和fadeOut

For the smooth fade in you can use fadeIn and fadeOut

这篇关于悬停时jQuery显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！