накладываемого interrups парения события

Question

UPDATE:

Был предложено включить мой HTML, обратите внимание, что это использование рулей для моего NodeJS кода:

<div id='grid'> 
    {{#each projects}} 
     <img src='{{image_path}}' id='image-{{id}}' class='gridImage'> 
     <div id='overlay-image-{{id}}' class='overlay'> 
      <div class='detail'> 
       <span style='font-size: 18px; font-family:OpenSans-Bold'>{{name}}</span> 
       <br><br> 
       {{shortDescription}} 
       <br><br> 
       Made by {{developers}} 
      </div> 
     </div> 
    {{/each}} 
</div> 

---

У меня есть сетка изображений, когда вы наводите курсор на каждое изображение, он расскажет вам что-то об изображении, используя оверлей div. Like this.

Теперь, вот код JQuery, чтобы сделать это:

$('.gridImage').mouseover(function() { 
    $('#overlay-'+$(this).attr('id')).css({ 
     'top': $(this).position().top, 
     'left': $(this).position().left, 
     'right': $(this).position().left, 
     'bottom': $(this).position().bottom, 
     'width': $(this).width(), 
     'height': $(this).height() 
    }).fadeIn(150); 
}); 
$('.gridImage').mouseout(function() { 
    $('#overlay-'+$(this).attr('id')).fadeOut(150); 
}); 

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

Довольно просто, это делает его таким образом я кладу курсор на изображение, оно исчезает в накладке, а затем исчезает его - в основном это мерцает

Как я могу это исправить?

Answer 1

Вы можете попробовать настроить событие mouseout прямо на оверлее вместо изображения. я также чувствую, что есть, вероятно, лучшее решение для этого, используя некоторые CSS

Answer 2

Попробуйте изменить mouseover/mouseout к mouseenter/mouseleave.

Редактировать

Здесь jsfiddle я использовал:

http://jsfiddle.net/ax9X5/2/

Редактировать 2

Поскольку .overlay не является дочерним элементом .gridImage, указанный выше раствор требует, чтобы оба они были помещены как дочерние элементы в контейнер и перемещали идентификатор и центр мыши в t контейнер для шляп.

Удачи!