заголовки при наведении курсора мыши мигают при наведении

Question

проблема может быть замечена здесь: http://www.studioimbrue.com/beta

код:

$(document).ready(function(){
    $('div.caption').hide();
    $('.captions ul li img').hover(function(){
        $(this).siblings('div.caption').fadeIn('medium');
    }, function(){
        $(this).siblings('div.caption').fadeOut('medium');
    });
});

Не уверен, что является причиной проблемы ... Кажется, все настроено правильно.

Answer 1

Проблема в том, что когда появляется заголовок, ваша мышь больше не находится на изображении - событие mouseleave отправляется на изображение, а mouseenter - на заголовок div. Первый вызывает затухание. Это можно решить, поместив изображение и заголовок в элемент контейнера (например, <div>) и применив обработчик событий к этому контейнеру. Тогда независимо от того, показывает заголовок или нет, внешний контейнер не получит mouseleave.

РЕДАКТИРОВАТЬ: Вот рабочий пример:

HTML:

<div class="captions" id="talktostrangers"> 
  <ul>
    <li> 
      <img src="image1.jpg"> 
      <div class="caption">Caption 1</div>
    </li>
    <li>
      <img src="image2.jpg"> 
      <div class="caption">Caption 2</div>
    </li>
  </ul>
</div>

Javascript:

$('.captions li').hover(function() {
  $('.caption', this).fadeIn();
}, function() {
  $('.caption', this).fadeOut();
});