title: Set z-index with javascript setTimeout()
body: <p>What I'm trying to do is to have 4 expandable divs overlapping each other with transition set in css for 0.6s. Because the expanding lasts for 0.6s I'd like to have the expanded div lose it's higher z-index after it's done collapsing, otherwise it looks silly. However, it doesn't work, the z-index remains unchanged. It's probably somethings stupid, but I just can't find it. Thanks!</p>
  
  <pre><code>&lt;div class="wrapper" style="position: relative;"&gt;
  &lt;div id="one" style="position: absolute;" onmouseover="
  this.style.height='250px';
  this.style.zIndex='1';
  " onmouseout="
  this.style.height='50px';
  setTimeout(function() {this.style.zIndex='0';},600);
  "&gt;blahblahblahblah&lt;/div&gt;
  &lt;div id="two" style="position: absolute;" onmouseover="
  this.style.height='250px';
  this.style.zIndex='1';
  " onmouseout="
  this.style.height='50px';
  setTimeout(function() {this.style.zIndex='0';},600);
  "&gt;blahblahblahblah&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>