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 使用 .mouseleave div:

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

Answer 2

如果您确实可以使用 class 属性灵活地修改 html 一点点，那么还有更好的方法。使用 .toggle() to alter the state of your element on both mouseover and mouseleave.

HTML :

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

jQuery :

$(".hello").on("mouseover mouseleave", function(){
    $("#hover_tutor").toggle();
    $("#hover_tutor_hidden").toggle();
});

jsFiddle

Answer 3

试试这个，

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

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

Answer 4

您还可以在悬停事件上使用 hide/show 的切换方法 instent

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

  $('#hover_tutor').hover(
     function () {
      $('#hover_tutor').toggle();
       $('#hover_tutor_hidden').toggle();
     });

工作演示 http://jsfiddle.net/ivyansh9897/8jgjvkqk/

Jquery 悬停和离开

Jquery on hover and out

javascript

jquery

html

jquery-hover