Jquery DIV位于DIV之上悬停时不闪烁

我试图实现一个悬停效果，如本例中所示 我想能够添加信息的div一旦悬停就像他们做了

以下是我尝试过的：

Jquery：

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

这是你想要的吗

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

试试这个

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

试试这个

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

---

这是开胃菜

想法是在加载

div.fade

后，鼠标的移动将触发

div.hover

的

mouseleave

。只需为div.hover编写一个

mouseover

，为

div.fade编写一个
mouseout

当然，稍微的
透明度
就可以达到您所需要的效果
您可以尝试以下代码：


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

GoGo请遵循我的答案，请看下面，它运行良好。有没有更好的方法来实现这一点，或者这是唯一的方法？你的答案确实有效，但我只是想知道我是否可以优化这段代码
$(document).ready(function(){    
    $(".hover").mouseover(function () {
        $(this).hide();
        $('.fade').show();
      }
    );
    $(".fade").mouseout(function () {
        $(this).hide();
        $('.hover').show();
      }
    );
});

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