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

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

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