adding/removing z-index on hover
<p>I'm attempting to add or remove the z-index property on two separate divs as the user hovers on them.</p>

<p>The catch is I have some Jquery written so it keeps the z-index property as the mouse is moved away, this is so there is a smooth transition. <a href="https://jsfiddle.net/45wdhdjy/1/" rel="nofollow">https://jsfiddle.net/45wdhdjy/1/</a></p>

<pre><code>$(".w-1").one("mouseover", function() {
  $(".w-1").addClass('permahover');
});
</code></pre>

<p>My problem is after hovering over the blue div the yellow div fails to have a greater z-index on its hover. I have a feeling the solution is joining both of my scripts into one if statement but I'm unsure how to go about this. Would anyone be able to point me in the right direction?</p>