title: JavaScript onmouseover not working as expected
body: <p>I've got this HTML:</p>
  <pre><code>&lt;div onmouseover=&quot;seth1();&quot;&gt;
      &lt;a onclick=&quot;showh1();&quot;&gt;h1&lt;/a&gt;
      &lt;a onclick=&quot;showh2();&quot;&gt;h2&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;h1&quot; style=&quot;display: none;&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;h2&quot; style=&quot;display: none;&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>and this Javascript to display automatically <code>h1</code> after 4 seconds or display one of both when users clicks:</p>
  <pre><code>var settime;
  function seth1() {
      settime = setTimeout('showh1();', 4000);
  }
  function showh1() {
      clearTimeout(settime);
      document.getElementById('h1').style.display = &quot;block&quot;;
  }
  function showh2() {
      clearTimeout(settime);
      document.getElementById('h2').style.display = &quot;block&quot;;
  }
  </code></pre>
  <p>But when I click to show <code>h2</code> it also shows <code>h1</code>, where am I wrong?</p>