StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The main problem with triggering events using <code>.hover()</code> or other mouse in/out jQuery methods is called <code>bubbling</code>.</p> <p>For your particular issue, your best bet is using the jQuery plugin <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="nofollow">hoverIntent</a>. If you visit their website, they have a good example about what dealing with bubbled events mean.</p> <p>After you loaded the <em>hoverIntent</em> js file, you can create two functions to open/close fancybox that will be called by <code>hoverIntent</code> as callbacks :</p> <pre><code>function openFancybox(){ $(this).trigger("click"); } function closeFancybox(){ $.fancybox.close(); } </code></pre> <p>.... then your <code>hoverIntent</code> custom script :</p> <pre><code>$(".mini-view").hoverIntent({ sensitivity: 7, interval:500, timeout:0, over: openFancybox, out: closeFancybox }); // hoverIntent </code></pre> <p>(see documentation to fine-tune your settings)</p> <p>...last, your <code>fancybox</code> custom script will simply look like:</p> <pre><code>$(".mini-view").fancybox({ 'overlayShow' : false, 'autoScale' : true }); // fancybox </code></pre> <p><a href="http://www.picssel.com/playground/jquery/mouseEnterLeave_30jul12.html" rel="nofollow">SEE WORKING DEMO</a> and feel free to explore the source code.</p> <p><strong>SIDE NOTES</strong>:</p> <ul> <li><p>To simplify your code, you could actually apply both plugins in a single step to the same selector :</p> <pre><code> $(".mini-view") .fancybox({ 'overlayShow' : false, 'autoScale' : true }) .hoverIntent({ sensitivity: 7, interval:500, timeout:0, over: openFancybox, out: closeFancybox }); </code></pre></li> <li><p>Because the options you used in your code, I assumed you were using fancybox v1.3.4. </p></li> </ul> <hr> <p><strong>UPDATE</strong> [March 2015] :</p> <p><strong><a href="http://www.picssel.com/playground/jquery/mouseEnterLeave_24mar15.html" rel="nofollow">DEMO</a></strong> using the latest versions of Fancybox (v2.1.5) and hoverIntent (v1.8.0)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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