Question

35

Jquery on hover and out

rated 0 times [ 41] [ 6] / answers: 1 / hits: 29820 / 10 Years ago, tue, january 27, 2015, 12:00:00

I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...

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

But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maximusbradforde

Add To Favorites

Follow

Total Points: 594

Total Questions: 106

Total Answers: 82

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 10 Years ago helenat · Accepted Answer

You need to use .mouseenter event for #hover_tutor div and .mouseleave for #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