Databases
StackOverflow2013
Postsdbo
POjQuery hover and unhover
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery hover and unhover
    text
    copied!<p>I have the following code:</p> <pre><code> $('a.uiPopup').hover(function () { $('.uiTip').show(); }, function () { $('.uiTip').remove(); }); $('div.uiTip').live("mouseover", function () { $(this).stop(true, true).show(); }); $('div.uiTip').live("mouseleave", function () { $(this).remove(); }); }); </code></pre> <p>So when you hover <code>uiPopup</code> then <code>uiTip</code> appears and then when you unhover it dissapears again BUT if you were to hover over the tip it would stop the tip from being removed and keep it on screen until your mouseleaves and then remove it.</p> <p>Doesn't work though :/ Any ideas? Thank you</p> <p><strong>The <code>.remove()</code> is intentionally as in my real script (this being a snippet to show my example) I am using AJAX to load in the .uiHelp and they have unqiue ids (again not shown in the above example as beyond the scope of question) Which all works fine just not the bit about stopping it when the user hovers the tip itself!</strong></p> <p>EDIT: For those that want to see the full script and why I have to use the hover:</p> <pre><code>$('a.uiPopup').hover(function () { $tip = '&lt;div class="uiTip uiOverlayArrowLeft loading"&gt;&lt;div class="uiOverlayContent"&gt;&lt;!--content here --&gt;&lt;/div&gt;&lt;i class="uiOverlayArrow"&gt;&lt;/i&gt;&lt;/div&gt;'; $newtip = $($tip).attr('id', 'organisationId-' + $(this).attr('id')); $($newtip).find('.uiOverlayContent').load(AppURL + 'Organisations/Manage/Tip', function () { $($newtip).removeClass('loading') }); $('body').append($newtip); $location = $(this).offset(); $top = $location.top; $left = $location.left; $right = $location.right; $bottom = $location.bottom; $left = $left + $(this).width(); $left = $left + 8; $top = $top - 10; $($newtip).css({ 'top': $top + 'px', 'left': $left + 'px' }); }, function () { $id = "div#organisationId-" + $(this).attr('id'); $($id).remove(); }); $('div.uiTip').live("mouseover", function () { $(this).stop(true, true).show(); }); $('div.uiTip').live("mouseleave", function () { $(this).remove(); }); }); </code></pre>
 

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