Databases
StackOverflow2013
Postsdbo
POHow can i disable/cancel setTimeOut when i mouseover && mouseout in specific areas?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can i disable/cancel setTimeOut when i mouseover && mouseout in specific areas?
    text
    copied!<p>i have a <strong>simple horizontal menu</strong> with four choices. When i mouseover a div (e.g. div A), its child appears and when i mouseout that specific div, its child disappears.</p> <p>I have placed a setTimeOut function for mouseover (it is about 300).</p> <p>In some specific conditions i would like to disable setTimeout</p> <p><strong>1.</strong> when i <strong>mouseout div A</strong> and <strong>i mouseover div B</strong>, i would <strong>not</strong> like to have that delay, and i would like just to show the childDiv of B</p> <p><strong>2.</strong> when i <strong>mouseout div B</strong> and i <strong>mouseover div C</strong>, i would <strong>not</strong> like to have that delay, and i would like just to show the childDiv of C</p> <p>But how can i achieve that??</p> <p>It's just that i have a series of events: (a simple algorithm)</p> <pre><code>If(mouseout(divA) &amp;&amp; mouseover(divB)) { disable setTimeOut; show(ChildDivB); //with no delay } else If(mouseout(divB) &amp;&amp; mouseover(divC)) { disable setTimeOut; show(ChildDivC); //with no delay } } </code></pre> <p>Generally, when i <strong>mouseover &amp;&amp; mouseout</strong> in "foo" div, (foo is the div that contains all divs) the settimeout shall be disabled.</p> <p>Can this be done in jquery??</p> <p><strong>My code is as follows:</strong></p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;style type="text/css"&gt; .myDiv { border:1px solid red; height:30px; width:100px; float:left; } .myDivChild { display:none; width:300px; height:300px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="foo" style="background-color:#3300FF;width:900px;height:30px;margin-top:100px;"&gt; &lt;div class="myDiv" style="background-color:red;margin-left:100px"&gt;A &lt;div class="myDivChild" style="background-color:red"&gt; Child Div A &lt;/div&gt; &lt;/div&gt; &lt;div class="myDiv" style="background-color:yellow"&gt;B &lt;div class="myDivChild" style="background-color:yellow"&gt; Child Div B &lt;/div&gt; &lt;/div&gt; &lt;div class="myDiv" style="background-color:green"&gt;C &lt;div class="myDivChild" style="background-color:green"&gt; Child Div C &lt;/div&gt; &lt;/div&gt; &lt;div class="myDiv" style="background-color:#00CCCC"&gt;D &lt;div class="myDivChild" style="background-color:#00CCCC"&gt; Child Div D &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var interval; $('.foo &gt; div').hover(function(){ var $showDiv = $(this).find('div'); interval = setTimeout(function(){ $showDiv.show(); },300); }, function(){ clearTimeout(interval); $(this).find('div').hide(); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </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