悬停时JQuery显示/隐藏

Posted 2023-03-05

【中文标题】悬停时JQuery显示/隐藏

【英文标题】：JQuery show/hide when hover

【发布时间】：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 演示链接，我知道它可能不适合您，但是您可以使用它，并且还有免费的主题:)

不这样，我不喜欢

【参考方案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
);