CODEWITHSUNDEEP
jquerymouseovershow-hide
Mars Mellow
Mars Mellow

Reputation: 228

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

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.

Upvotes: 0

Views: 1885

Answers (2)

idhindsight
idhindsight

Reputation: 76

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

Upvotes: 0

Vincent Duprez
Vincent Duprez

Reputation: 3892

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.

Upvotes: 4

Related Questions