JQuery: не ограничивайте мышью при некоторых обстоятельствах

Question

У меня довольно простой вопрос, который я не могу обернуть (возможно, потому что сейчас 5 утра). Это можно упростить до следующего:

HTML:

<img src="image.jpg" alt="logo" />
<span class="caption">This is a caption</span>

JS:

$("img").mouseover(function() {
    $('.caption').show();
});

$("img").mouseout(function() {
    $('.caption').hide();
});

Используя CSS, я поместил заголовок поверх изображения, используя свойство z-index и абсолютное позиционирование. Проблема заключается в том, что заголовок исчезнет, ​​как только появится, а затем снова появится, если мышь все еще движется, что приведет к миганию раздражения.

Очевидно, это не должно происходить. По сути, событие mouseover не должно вызываться при наведении самого заголовка. Кто-нибудь получил исправление?

Answer 1

Как насчет этого:

HTML:

<div class="image_hover">
  <img src="image.jpg` alt="logo" />
  <span class="caption">This is a caption</span>
</div>

JS:

$(".image_hover").live({
  mouseenter: function() {
    $(this).find('.caption').show();
  },
  mouseleave: function() {
    $(this).find('.caption').hide();
  }
});