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

Answer 2

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>

-edit -

是的，here you go -- JSFiddle

Answer 3

我希望我的脚本可以帮助你。

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

Answer 4

由于你正在使用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
});

Answer 5

此代码也适用。

$(".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>

悬停时JQuery显示/隐藏

5 个答案: