悬停时JQuery显示/隐藏答案

【问题标题】：JQuery show/hide when hover悬停时JQuery显示/隐藏
【发布时间】：2011-07-21 06:12:40
【问题描述】：

我有三个链接，猫、狗、蛇。当我将鼠标悬停在每个链接上时，与每个链接相关的内容应该会发生变化。

因此，如果我将鼠标悬停在 cat 上，则会出现 cat 内容，如果我将鼠标悬停在 dog 上，则 cat 内容会平滑消失，并且会出现 dog 内容......等等。

链接是：狗猫蛇

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

我怎样才能让它完全正常工作，并有一些平滑的褪色？

【问题讨论】：

我会使用 jquery 选项卡 :) 更好，并使用鼠标悬停选项，jqueryui.com/demos/tabs/#mouseover 演示链接，我知道它可能不适合您，但是您可以使用它，并且还有免费的主题:)
不这样，我不喜欢

标签： jquery jquery-plugins jquery-selectors jquery-events

【解决方案1】：

此代码也有效。

$(".circle").hover(function() {$(this).hide(200).show(200);});

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:black;
    line-height:100px;
    text-align:center;
    background:yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="circle">hover me</div>

【讨论】：

【解决方案2】：

希望我的脚本能帮到你。

<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>

【讨论】：

为了避免让很多动画排队，你可以在fadeOut或fadeIn之前添加stop()，比如$(".producto").stop().fadeIn();。

【解决方案3】：

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

其他的也一样。

为了平滑淡入，您可以使用fadeIn 和fadeOut

【讨论】：

有没有你可以在jsfiddle.net上展示一个例子，它真的很有帮助。

【解决方案4】：

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>

-编辑-

是的，当然，here you go -- JSFiddle

【讨论】：

嘿，这太完美了...非常感谢...我想我可以在此基础上再接再厉...现在我可以直观地看到您是如何做到的。
很高兴听到！很高兴我能帮上忙。成功了，请采纳这个答案。
嘿，我还需要 1 个帮助。我想要它：当鼠标不在其中任何一个上时，没有任何内容显示...似乎当鼠标离开上一个链接时，以前的链接内容仍然显示为可见。

【解决方案5】：

由于您使用的是 jQuery，您只需要附加到一些特定的事件和一些预定义的动画：

$('#cat').hover(function()
{
     // Mouse Over Callback
}, function()
{ 
     // Mouse Leave callback
});

然后，要做动画，你只需要调用fadeOut/fadeIn 动画：

$('#dog').fadeOut(750 /* Animation Time */, function()
{
    // animation complete callback
     $('#cat').fadeIn(750);
});

将两者结合在一起，您只需在悬停回调中插入动画（类似这样，以此作为参考点）：

$('#cat').hover(function()
{
     if($('#dog').is(':visible'))
        $('#dog').fadeOut(750 /* Animation Time */, function()
     {
        // animation complete callback
         $('#cat').fadeIn(750);
     });
}, function()
{ 
     // Mouse Leave callback
});

【讨论】：