悬停时的jQuery

Question

我试图隐藏一个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...时，正在发生某些事情。它在上下跳跃。我不知道这是怎么回事...

Answer 1

您需要使用.mouseenter事件#hover_tutor的div和.mouseleave对#hover_tutor_hiddenDIV：

$('#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 

工作演示