Question

This question seems somewhat related to

• How do I check if the mouse is over an element in jQuery?
• jQuery check hover status before start trigger

but still not quite. Here’s the thing: I’m writing a small gallery and at some point the user clicks on a thumbnail. The large version of the image shows as an inside of a full-screen . So far, so good. When the mouse hovers over that I show three images: close, left, right, intended to navigate through an album; when the mouse leaves the image or the navigation images, the three navigation images fade.

These three navigation images partially overlap with the main image, e.g. the close image is a circle in the upper left corner. And that’s the tricky part.

The mouseleave triggers whenever the mouse moves from the main image off the side, or from the main image onto one of the three small overlapping images. The mouseenter triggers for each of the small overlapping images as expected.

However, this creates a funky blinking effect because on mouseleave of the main image I hide() the three small images, which immediately triggers a mouseenter for the main image because of the overlap and the mouse still being on top of the main image.

To avoid that, I tried to determine if, upon mouseleave of the main image, the mouse has moved onto one of the small overlapping images. For that, I used this code:

main_img.mouseleave(function() {
  if (!hoverButtons()) {
    doHideButtons();
  }
});

function hoverButtons() {
  return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}

This works great on Safari and Chrome, but not on FF and IE where the images still blink. Further noodling around posts, it seems that “:hover” is the problem here as it is not a proper selector expression but rather a CSS pseudo class?

I tried to work with switches that I flip on/off as I mouseenter/mouseleave the various images, but that doesn’t work either because the events seem to trigger in different orders.

How do I go about this? Thanks!

EDIT: I might have to clarify: before the navigation buttons are shown, I set their respective left and top attributes in order to place them in dependence of the main image’s position. That means I need to do some work before I can call .show() on a jQuery selector. I tried to add a new function .placeShow() but that didn’t quite work with respect to selectors like $(“.nav-button:hidden”).placeShow().

Answer 1

You can try with this:

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});

DEMO