Databases
StackOverflow2013
Postsdbo
POjquery hover() mouseOut event not firing when mouse is moved quickly over link
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery hover() mouseOut event not firing when mouse is moved quickly over link
    primarykey
    data
    text
    <p>I have simple link list and when you hover over it it appends a div (loading data in this div from XML) and on hover out it removes the div, but it only happens when mouse moves slowly over the links as soon as mouse moves more fast then usual over the links then it doesn't remove the div which means mouseout event was not fired</p> <p>Move your mouse aggressively on first two links then you can see that div some times doesn't hide </p> <p>Here is link to my demo <a href="http://ukcatonline.com/template/" rel="nofollow noreferrer">http://ukcatonline.com/template/</a></p> <p>Here is my code:</p> <pre><code>$(document).ready(function () { //vertical navigation js $(".mainnav_v a").hover( function (e) { $this = $(this) $this.stop().animate({ paddingLeft : '16px'}, 300); var brand =""; var category="designer_frames"; $this.each(function() { var title = this.title; if ($this.is('a') &amp;&amp; $this.attr('title') != '' &amp;&amp; $this.attr('id')==category) { brand= this.title; $.ajax({ type: "GET", url: "xml/peek_menu.xml", //ie bug : it send wrong datatype on localmachine dataType: ($.browser.msie) ? "text" : "xml", success: function(data) { var xml; if (typeof data == "string") { xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); } else { xml = data; } //could have used $(xml).find(category).each(function() but jquery is intelligent enough to know wat element is currently selected $(category, xml).each( function(){ $(brand,this).each( function(){ var title = $(this).attr('title'); var imgurl = $(this).attr('imgurl'); var description = $(this).find('description').text(); var feature1 = $(this).find('feature1').text(); var feature2 = $(this).find('feature2').text(); var feature3 = $(this).find('feature3').text(); var feature4 = $(this).find('feature4').text(); var html = '&lt;div id="peek_container"&gt;&lt;img src="' + imgurl + '" alt="" /&gt;&lt;br /&gt;&lt;br /&gt;&lt;h1&gt;'+title+'&lt;/h1&gt;&lt;br /&gt;'; html += '&lt;p&gt;' + description + '&lt;/p&gt;&lt;br /&gt;'; html += '&lt;ul&gt;&lt;li&gt;'+feature1+'&lt;/li&gt;&lt;li&gt;'+feature2+'&lt;/li&gt;&lt;li&gt;'+feature3+'&lt;/li&gt;&lt;li&gt;'+feature4+'&lt;/li&gt;&lt;/ul&gt;&lt;br /&gt;&lt;/div&gt;'; $this.parent().append(html); } ); } ); } } ); } }); }, function (e) { $this = $(this); $this.stop().animate({ paddingLeft : '6px' }, 300); $this.siblings().remove(); } );}); </code></pre> <p>Here is my HTML: </p> <pre><code>&lt;ul class="mainnav_v"&gt; &lt;li&gt;&lt;a href="#url" class="peek" title="Boss" id="designer_frames"&gt;Boss&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#url" title="Burberry" id="designer_frames"&gt;Burberry&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#url" title="Bvlgari" id="designer_frames"&gt;Bvlgari&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#url"&gt;Chanel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#url"&gt;Diesel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#url"&gt;Dior&lt;/a&gt;&lt;/li&gt; </code></pre> <p></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBill the Lizard
    1. USSalman
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery hover() mouseOut event not firing when mouse is moved quickly over link
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat browser are you using? Works fine for me on IE8 and Chrome
      singulars
      1. POjquery hover() mouseOut event not firing when mouse is moved quickly over link
      1. USRob Fonseca-Ensor
    2. COWorks fine at any speed for me too (Safari on OS X)
      singulars
      1. POjquery hover() mouseOut event not firing when mouse is moved quickly over link
      1. USmicahwittman
    3. COI can 'see' the problem in FF3.5. Foccs on the top 2 item, move your pointer quickly across them.
      singulars
      1. POjquery hover() mouseOut event not firing when mouse is moved quickly over link
      1. USo.k.w
 

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