CODEWITHSUNDEEP
javascriptjqueryhtmljquery-hover
marukobotto
marukobotto

Reputation: 771

Jquery on hover and out

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

Upvotes: 9

Views: 37548

Answers (4)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .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

Upvotes: 1

Shailendr singh
Shailendr singh

Reputation: 686

You can also use toggle method instent of hide/show on hover event

<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();
     });

Working demo http://jsfiddle.net/ivyansh9897/8jgjvkqk/

Upvotes: 2

soundhiraraj
soundhiraraj

Reputation: 323

try this,

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

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 19

Related Questions