flickering when mouse over, .hover() show/hide div(s)

Question

Good day,

I have these div(s) containers with 2 inner div(s) holding (a) image & (b) text description respectively.

I hide these (b) text description div(s) using .hide() when page load, then using .hover() to show/hide the hidden text description div, sample code below:

<div class="projectBlock">
<div class="imgBlock" id="imgBlock1"><a href="http://www.tesco.com.my" target="_blank"><img src="http://i23.photobucket.com/albums/b395/yiyonglee/thumb-project-tesco.jpg"></a>

</div>
<div class="descBlock" id="descBlock1">Tesco Malaysia</div>

The show/hide works fine, except if mouseover area hit somewhere inside the descrption text area, the div container flickers while moving around.

my jQuery portion:

$('.descBlock').hide();

$('#imgBlock1').hover(function () {
    $('#descBlock1').show();
}, function () {
    $('#descBlock1').hide();
});

$('#imgBlock2').hover(function () {
    $('#descBlock2').show();
}, function () {
    $('#descBlock2').hide();
});

Demo here: jsfiddle

Why is it acting in such way? Thanks in advance.

Answer 1

Ty this instead:

jsFiddle

$('.descBlock').hide();

$('.projectBlock').hover(function () {
    $(this).find('.descBlock').show();
}, function () {
    $(this).find('.descBlock').hide();
});

You only have to do it once to affect all the projectBlock elements.

Answer 2

Quite simply, because the overlay block, descBlock{1|2} is obscuring the larger block which you are watching for mouse events.

See if this is more what you want

By putting in another hover() listener, and having that callback show the child block regardless of whether the mouse is in or out. I only did it for the descBlock1, so you can see the contrast.

$('#descBlock1').hover(function () {
 $('#descBlock1').show();
}, function () {
 $('#descBlock1').show();   
});