наведите указатель мыши на один div, другой div затухает и остается видимым, пока пользователь наводил на него

Question

У меня есть контейнер div. Внутри контейнера, кроме названия статьи, есть скрытый div (позиция: abolute, рядом с заголовком статьи & «снаружи» контейнера div), который содержит изображение статьи и обрезанный текст.

Что я хочу: Пользователь парит над название статьи:

<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 

Как результат, всплывающее окно

<div class="article_popup"> 

выцветает рядом с названием контейнера статьи.

Если пользователь не наводится на всплывающее окно, всплывающее окно исчезает через 1 секунду. Если он это делает, popu остается видимым до тех пор, пока пользователь всматривается в всплывающее окно, а затем исчезает через 1 секунду.

Проблема:

-1- Есть много статей контейнеров & Всплывающих дивов разделяющих один и тот же класс, так что все всплывающие окна появляются, если только один заголовок колебались.

-2- Я попытался это и аналогичные решения:

(function ($) { 
    $(document).ready(function(){ 
     $('.field-title').bind('mouseenter', function() { 
     $('.article_popup').fadeIn(); 
     }); 
     $('.field-title').bind('mouseleave', function() { 
     $('.article_popup').fadeOut(); 
     }); 
    }); 
}(jQuery)); 

Но это не распространяется на случай, когда пользователь парит над самым всплывающим окном.

обновление: http://jsfiddle.net/zThP7/14/

Вот мой HTML (как вы можете видеть, что есть много вложенных див с теми же классами):

<div class="container_block"> 
<table class="container_table"> 
    <tbody> 
      <tr class="row-1"> 
        <td class="col-1"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
        <td class="col-2"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
      </tr> 
      <tr class="row-2"> 
        <td class="col-1"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
        <td class="col-2"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
      </tr> 
      <tr class="row-3"> 
        <td class="col-1"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
        <td class="col-2"> 
         <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div> 
         <div class="article_popup_container"> 
          <div class="field-content"> 
           <div class="article_popup"> 
            <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div> 
            <div class="article_popup_text">Lorem Ipsum</div> 
           </div> 
          </div> 
         </div>   
        </td> 
      </tr> 
     </tbody> 
</table> 

Я предпочитаю это быть решен с помощью пользовательского кода , а не предлагаемый плагин jquery, но если он будет слишком сложным, функциональный плагин с поддержкой кросс-браузерабудет в порядке.

Answer 1

Вам нужно будет перемещать popover внутри одного и того же контейнера, поэтому вам нужно иметь дело только с мышью одного элемента. Проверьте первый, он по крайней мере даст вам отправную точку. http://jsfiddle.net/zThP7/15/

Answer 2

Я думаю, что это то, что вы ищете;)

https://stackoverflow.com/a/1670561/472406

Единственное, что вам нужно изменить, чтобы добавить событие MouseEnter для вас всплывать элемент и очистить тайм-аут и для MouseLeave из всплывающего окна добавить тайм-аут, чтобы скрыть всплывающее окно

Поскольку в названии элемента вам придется очистить тайм-аут, если пользователь переходит из всплывающего меню в заголовке всплывающего окна не исчезнет