Question

我试图隐藏div，每当我将鼠标悬停在它上面并在同一个地方显示另一个..当我将鼠标移出时...将显示之前的div并且{ {1}}将被隐藏......

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> ......事情正在发生......它在跳跃......我不知道出了什么问题......

Answer 1

您需要为.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

Answer 2

您还可以在悬停事件

上使用隐藏/显示的切换方法内容

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

Answer 3

如果您可以灵活地使用class属性修改html，那么有一种更好的方法。使用.toggle()更改mouseover和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 4

试试这个，

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

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

Jquery在悬停和外出

4 个答案: