Question

I’ve got a pretty basic question that I can’t wrap my head around (possibly since it’s 5 AM here). It can be simplified to the following:

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();
});

Using CSS, I positioned the caption on top of the image using the z-index property and absolute positioning. The problem is that the caption will disappear once it’s hovered, then reappear again if the mouse is still moving, resulting in a blinking annoyance.

Obviously this is not meant to happen. Basically, the mouseover event shouldn’t be called when the caption itself is hovered. Anyone got a fix?

Answer 1

How about this:

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();
  }
});