Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Some things to clarify, based on how best I could understand your situation:</p> <p><strong>(1)</strong> <code>.hover()</code> is actually two-fold: you normally provide a function callback to execute when you <code>mouseover</code> onto the elements you specified <strong>and</strong> another to call when you <code>mouseout</code>. When you only provide one, it executes the same for both.</p> <pre><code>$(element).hover( function () { // to execute on mouseover }, function () { // to execute on mouseout } ); </code></pre> <p><strong>(2)</strong> Inside an event handler, the element where the event supposedly happened is referenced by <code>this</code>. There is virtually no need to select the elements again most of the time.</p> <pre><code>$('#LeftArrow_Wrapper, #RightArrow_Wrapper').hover(function () { $(this).stop(true, true).show(); }); </code></pre> <p><strong>(3)</strong> <code>.stop()</code> stops <em>animations</em>. Calling <code>.show()</code> on its own <strong>does not</strong> trigger jQuery animation on the element (since it's instantaneous), but calling <code>.show(duration)</code>, for example, does, because jQuery performs a fade + size over a duration.</p> <h2>So, what?</h2> <p>All in all, what's happening in your original code is that, when you mouse over an element, it'll show <strong>both</strong> <code>#LeftArrow_Wrapper</code> and <code>#RightArrow_Wrapper</code> (because of your original <strong>(2)</strong>), but it'll also do the same thing when you mouse out, since you only provide one callback for <code>.hover()</code> (see <strong>(1)</strong>).</p> <p>It doesn't help that your call to <code>.stop()</code> is useless, because there's no animation for it to stop (unless there's something else happening outside this piece of code --- it's most certainly not stopping your call to <code>.show()</code>).</p> <p>Your question isn't the most detailed, so what I <em>think</em> you want to do is something like this:</p> <pre><code> $('#LeftArrow_Wrapper, #RightArrow_Wrapper').hover( function () { $(this).show(); }, function () { $(this).hide(); }, ); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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