проблемам с ложными срабатываниями show()/hide()
 

Всем привет!

Сразу оговорюсь, я не программист и опыта в javascript у меня совсем не много. Я сейчас делаю сайт на drupal, и хочу чтобы при наведении курсора на картинку по верх нее появлялся блок с текстом (как тут cargoh.com, при наведении на товары подобная механика).

Код примерно такой, я пробовал с show/hide и slideToggle:
<script type="text/javascript">
$(document).ready(function() {
$(".bo2").hide(); $(".bo").mouseover(function(){ $(".bo2").show();});
$(".bo2").mouseout(function(){$(".bo2").hide();} );
});
</script>
<div class="bo" style="width:100px; height:100px; background-color:#CCC; margin:0px;"></div>
<div class="bo2" style="width:100px; height:100px; background-color:#06F; margin:-100px 0px 0px 0px;">some text</div>
При таком виде всё вроде ок, но если в div bo2 поместить не чистый текст, а текст внутри тега (div, p и т.д.) то он (bo2) начинает моргать если задеть курсором вложенные элементы.

Как сделать так что бы этого не происходило?

используйте mouseleave вместо mouseout

огромное спасибо, сработало, надо больше читать api))