mouseenter/mouseleave... but ONLY when leaving either the current item OR popup?
Hi,
I've been going round and round in circles with this for ages :(
Basically I have a setup similar to:
- <div class="link-listing" id="link_123" rel="123">
some content here
</div>
<div class="link-listing" id="link_124" rel="124">
some more here
</div>
<div class="link-listing" id="link_125" rel="125">
some other here
</div>
<div id="preview_link_box"></div>
What the code does, is pick up when we enter a .link-listing, and grab some AJAX content based on the "rel" listing ID it grabs. This content is then put into the #preview_link_box div. This all works fine - until you move from the image into the preview box (in which case "mouseleave" fires for the .link-listing element, and then re-runs for #preview_link_box)
I've tried all sorts of things to get around this, but still can't get my head around how to resolve it :( Can anyone give any pointers? I've tried using the "hoverIntent" plugin btw - but that didn't work too well (as it wouldn't cope with the AJAX loaded listings we also have on this page)
The JS is:
- $(document).on("mouseenter mouseleave",".listing_image_fixed,#preview_link_box", function (ev) {
- var link_id = $(this).attr('rel');
- var is_grid = 0;
- if ($(this).hasClass("listing_image_fixed_grid")) {
- is_grid = 1;
- }
- var is_faves;
- if (link_id.match("-faves")) {
- link_id = link_id.replace("-faves","");
- is_faves = 1;
- }
- if (saved_popups[link_id]) {
- process_popup($(this),1,link_id,is_faves,is_grid);
- } else {
- process_popup($(this),0,link_id,is_faves,is_grid);
- }
- });
TIA!
Andy