CODEWITHSUNDEEP
jquery
Jitender
Jitender

Reputation: 7969

Mouseenter and Mouseleave function in jquery

i have div box. i want when user hover it or mouseenter then next div should display and when user mouseout the visible div should fadeout. my function not working correctly. 

<head>    
<script type="text/javascript" src="jquery-1.7.2.js"></script>    
<script type="text/javascript">  

$(function (){      

    $('.box').bind({            
        mouseenter: function (){                
            $(this).next().fadeIn('fast')               
        },          
        mouseout: function (){
            $(this).next().fadeOut('fast')                  
        }


        })      
    })    
</script>    

<style>

body { margin:0}
.box { height:300px; width:300px; background:#F00}

.boxcaption { width:300px; height:300px; background:#00F; position:absolute; left:0; top:0; display:none}
</style>
</head>

<body>

<div class="wrap">

<div class="box"></div>
<div class="boxcaption"></div>

</div>
</body>

Upvotes: 0

Views: 610

Answers (1)

jeschafe
jeschafe

Reputation: 2683

The second element is over the first element. So when you're mouseentering and then it fades it in, it's seeing an immediate mouseout which is why it's fading. Move your second element down 300 px and you'll see that it works.

Upvotes: 3

Related Questions