javascript - 悬停时的jQuery

每当我将鼠标悬停在其上并在同一位置显示另一个div时，我都试图隐藏它。当我将鼠标移出该位置时。.上一个div将显示，此div将被隐藏...

$(document).ready(function(){



      $('#hover_tutor').hover(
         function () {
           $('#hover_tutor').hide();
           $('#hover_tutor_hidden').show();
         },
         function () {
           $('#hover_tutor').show();
         $('#hover_tutor_hidden').hide();
         }
     );

   });



  <div id="hover_tutor">Blah</div>
  <div id="hover_tutor_hidden" style="display:none;">Bleh</div>

但是在悬停hover_tutor时……正在发生某些事情。它在上下跳跃……我不知道这是怎么回事...

最佳答案

您需要为.mouseenter div使用#hover_tutor事件，为.mouseleave div使用#hover_tutor_hidden:

$('#hover_tutor').mouseenter(function () {
       $(this).hide();
       $('#hover_tutor_hidden').show();
     });

 $('#hover_tutor_hidden').mouseleave(function () {
       $('#hover_tutor').show();
     $(this).hide();
     }
 ).mouseleave();//trigger mouseleave to hide second div in beginning

Working Demo