CODEWITHSUNDEEP
jqueryhtml
keepmoving
keepmoving

Reputation: 2043

How to hide and show div

I have very small thing to do, That is:

I have two divs, called "first" and "second". Initially div "second" is hidden and div "first" is visible on page load. Once I hover on div "first" the "second" div is visible and "first" is hidden. Now here I want it so then when I mouse out from "second" div the "first" div should be visible and "second" should hide. My problem is that the first time I hover mouse on "first" div, the "second" goes visible but later on mouse over does not work and "second" div is not hidden.

$('#first').hover(function(){
 $('#second').hide();

});


$('#second').onmouseover(function(){
 $('#second').hide();
$('#first').show();

});
<div id="first"> First </div>
<div id="second"> Second </div>

Upvotes: 0

Views: 204

Answers (2)

Suhas Gosavi
Suhas Gosavi

Reputation: 2180

Working Fiddle

$('#first').on('mouseover', function(){
   $('#second').show();
   $('#first').hide();
});

$('#second').on('mouseout', function(){
   $('#first').show();
   $('#second').hide();
});

Upvotes: 1

Felix
Felix

Reputation: 38112

There is no onmouseover function, you can use mouseover or .on('mouseover',.....)

You can do like this:

$('#first').on('mouseover', function(){
    $('#second').show();
    $('#first').hide();
});

$('#second').on('mouseout', function(){
    $('#first').show();
    $('#second').hide();
});

Fiddle Demo

Upvotes: 0

Related Questions