title: CSS3 Transitions - How to delay reset of the z-index property?
body: <p>Basically, a "highlight" class is added to elements with class "edge" dynamically through javascript on mouseenter. The highlight class is removed on mouseleave. I want to transition the border-color of these elements. However, this "highlight" class also modifies the stack order. I want a z-index of 1 to be set on all highlighted edges before the transition begins (on mouseenter) and I want the z-index of 1 to be removed after the transition completes (on mouseleave). Currently the z-index property is reset immediately after the "highlight" class is removed.</p>
  
  <p>Basic set up:</p>
  
  <pre><code>.edge {
  
      border-color: hsl(0, 0%, 40%);
      border-style: solid;
      border-width: (set appropriately in another selector);
  
      transition-duration: 1s;
      -moz-transition-duration: 1s;
      -o-transition-duration: 1s;
      -webkit-transition-duration: 1s;
  
      transition-property: border-color;
      -moz-transition-property: border-color;
      -o-transition-property: border-color;
      -webkit-transition-property: border-color;
  }
  
  .edge.highlight {
      border-color: hsl(0, 0%, 85%);
      z-index: 1;
  }
  </code></pre>
  
  <p>First attempt (obviously the delay fixes the timing on one end and messes it up on the other):</p>
  
  <pre><code>.edge {
      border-color: hsl(0, 0%, 40%);
      border-style: solid;
      border-width: (set appropriately in another selector);
  
      transition-duration: 1s, 0;
      -moz-transition-duration: 1s, 0;
      -o-transition-duration: 1s, 0;
      -webkit-transition-duration: 1s, 0;
  
      transition-delay: 0, 1s;
      -moz-transition-delay: 0, 1s;
      -o-transition-delay: 0, 1s;
      -webkit-transition-delay: 0, 1s;
  
      transition-property: border-color, z-index;
      -moz-transition-property: border-color, z-index;
      -o-transition-property: border-color, z-index;
      -webkit-transition-property: border-color, z-index;
  }
  </code></pre>
  
  <p>Any and all help is very much appreciated. Thanks in advance.</p>
  
  <p><strong>edit:</strong> Please keep in mind that the user can mouseenter/mouseleave on several different edges before the transitions have a chance to complete. Thanks.</p>