title: How to have a mouseover event fire only if the mouse is hovered over an element for sometime
body: <p>I want to change the background of a button when a user puts the mouse over the button for sometime. I would like to change the background only if the mouse is left over the image for one full second so as to mistakenly mouse crossing over the button.</p>
  
  <p>I used the following code but unfortunately no result. Can you please identify where I made the mistake?</p>
  
  <pre><code>&lt;html&gt;
  &lt;script&gt;
    var stillmouseover=0;
  
    function bcAnimation(y){  
      setTimeout(   function(){if (y.addEventListener('mouseover')) {stillmouseover = 1; } }, 2000);
      if (stillmouseover == 1) { y.style.backgroundColor = "Red";  }
    }
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;button id='x' onmouseover="bcAnimation(this);" style="width:100;height:100;border:2;"&gt;i&lt;/button&gt; &lt;br&gt; &lt;br&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>