HTML
<div class="container">
<div class="section" id="block1">Section-1</div>
<div class="section" id="block2">Section-2</div>
<div class="section" id="block3">Section-3</div>
<div class="section" id="block4">Section-4</div>
<a href="javascript:void(0);" class="btn01">Click1</a>
<a href="javascript:void(0);" class="btn02">Click2</a>
<a href="javascript:void(0);" class="btn03">Click3</a>
<a href="javascript:void(0);" class="btn04">Click4</a>
</div>
CSS
.container {
position:relative;
}
.section {
width:500px;
height:300px;
background-color:#f00;
position:absolute;
top:50px;
display:none;
}
JQUERY
$('.container').children('a').on('click',function(){
$('.container').children('div').hide().eq($(this).index()-4).fadeIn(400);
});
When clicking on any link within the container div, the related section is displayed. However, I am unable to hide the section when the cursor moves away from it. How can this be achieved?