title: applying a timed hold after mouseover to a css hover element
body: <p>this is probably very simple using javascript or jquery, but I cannot wrap my head around it.  I am providing a sample using a simple css box with a :hover applied in a different color.  I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover.  After the set time has finished, I would like the hover to reset as normal.  Also if the user were to accidentally hover over the #box  while the hover is being held it will not reset, it will continue to hold until after the set time has finished.  </p>
  
  <p>here is my html and css</p>
  
  <pre><code>    #box {
              width: 200px;
              height:300px;
              background-color: #00CCFF; 
      }
  
      #box:hover {
              width: 200px;
              height:300px;
              background-color: #669933;
      }
  
      &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;    
      &lt;div id="box" &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>