мерцает при наведении на, .hover() показать/скрыть DIV (ов)

Question

Добрый день,

У меня есть эти Div (ы) контейнеры с 2 внутренней DIV (ов), являющихся владельцами (а) изображение & (б) текстовое описание соответственно.

Я прячу эти (б) текстовое описание DIV (ы) с помощью .hide() при загрузке страницы, а затем с помощью .hover(), чтобы показать/скрыть скрытый текст описания DIV, пример кода ниже:

<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> 

Показать/скрыть работает отлично, за исключением случаев, когда область курсора попала где-то внутри текстовой области дескрипции, контейнер контейнера мерцает при перемещении.

мой JQuery часть:

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

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

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

Демо здесь: jsfiddle

Почему это действует таким образом? Заранее спасибо.

Answer 1

Ty вместо этого:

jsFiddle

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

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

Вы только должны сделать это один раз, чтобы воздействовать на все элементы projectBlock.

Answer 2

Проще говоря, поскольку блок перекрытия descBlock {1 | 2} скрывает больший блок, который вы смотрите на события мыши.

See if this is more what you want

Поставив в другом парение() слушатель, и имеющий, что обратный вызов показать дочерний блок независимо от того, является ли мышь или наружу. Я сделал это только для descBlock1, так что вы можете увидеть контраст.

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