Question

我正在尝试实现像此示例中的悬停效果http://usepanda.com/app/ 我希望能够像曾经一样徘徊在div上添加信息

以下是我尝试的内容：http://jsfiddle.net/ynUKx/584/

<div class="hover"></div>
<div class="fade" style="display:none"></div>

CSS：

   .hover{
    width:40px;
    height:40px;
    background:yellow;
}
.fade{
    position:absolute;
    top:0px;
    width:40px;
    height:40px;
    background:black;    
}

Jquery的：

$(document).ready(function(){    
    $("div.hover").hover(
      function () {
        $("div.fade").fadeIn();
      }, 
      function () {
        $("div.fade").fadeOut();
      }
    );
});

Answer 1

您可以尝试以下代码：

<强> Working Fiddle here

$(document).ready(function(){    
  $("div.hover").mouseover(
     function () {
      $("div.fade").fadeIn();
     }); 
      $("div.fade").mouseout( function () {
        $(this).fadeOut();
      }
   );
});

Answer 2

这是你想要的吗？

<div class="hover">
  <div class="fade" style="display:none"></div>
</div>

Answer 3

尝试thiis

$(document).ready(function(){    
$('.hover').mouseover(
    function(){
        $(this).fadeOut();
        $('.fade').fadeIn();
    }
)
$('.fade').mouseout(
    function(){
        $(this).fadeOut();
        $('.hover').fadeIn();
    }
)
});

http://jsfiddle.net/ynUKx/586/

Answer 4

试试这个

$(document).ready(function(){    
    $(".hover").mouseover(function () {
        $(this).hide();
        $('.fade').show();
      }
    );
    $(".fade").mouseout(function () {
        $(this).hide();
        $('.hover').show();
      }
    );
});

Answer 5

这里有一些适合初学者的东西 http://jsfiddle.net/ynUKx/587/

这个想法是在加载div.fade之后，鼠标的移动会触发mouseleave的{{1}}。您只需要为div.hover写一个div.hover，为mouseover写一个mouseout。

当然，有一点div.fade会做你需要的伎俩

DIV顶部的DIV悬停时没有闪烁

5 个答案: