Databases
StackOverflow2013
Postsdbo
POHow to resolve mouse hover on overlapping images in jQuery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to resolve mouse hover on overlapping images in jQuery?
    primarykey
    data
    text
    <p>This question seems somewhat related to</p> <ul> <li><a href="https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery">How do I check if the mouse is over an element in jQuery?</a></li> <li><a href="https://stackoverflow.com/questions/6035137/jquery-check-hover-status-before-start-trigger">jQuery check hover status before start trigger</a></li> </ul> <p>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 <em>or</em> the navigation images, the three navigation images fade.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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:</p> <pre><code>main_img.mouseleave(function() { if (!hoverButtons()) { doHideButtons(); } }); function hoverButtons() { return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover")); } </code></pre> <p>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?</p> <p>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.</p> <p>How do I go about this? Thanks!</p> <p>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().</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USJens
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. USRobbiegod
      1. VTFavorite
    1. COtry to make a fiddle at http://jsfiddle.net
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. USThe System Restart
    2. COTry this one: [http://jsfiddle.net/WVeDs/](http://jsfiddle.net/WVeDs/) It works fine on Safari and Chrome, but hover on the small image in FireFox and it'll flicker like crazy.
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. USJens
    3. COThis is not just a jQuery issue, it is a common sense issue and it is driving me nuts. You'd think there would be some way to distinguish between leaving the object as opposed to still being inside it, just with another object over it. I would very much appreciate a general solution to this problem.
      singulars
      1. POHow to resolve mouse hover on overlapping images in jQuery?
      1. USpuk
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload