JQuery on hover и out

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

Если у вас есть гибкость, чтобы изменить ваш 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 3

попробовать это,

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

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

Answer 4

Вы также можете использовать тумблер метод 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/