Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's the parent elements (.container) that are causing your grief. Because of their html order and the fact that they're static positioned, the second .container's child elements will always be in front of the first .container's.</p> <p>If this is the html structure you must use, add "position: relative" to the .container default css and adjust their z-index individually on your events.</p> <pre><code>#blue { position:relative; } $(".box").click(function () { $(this).css({"-webkit-transform-style":"preserve-3d", "background-color":"red", "box-shadow":"0px 0px 10px red", "-webkit-transition":"all .2s ease-in", "zoom":"1", "z-index":"10", "-webkit-transform":"rotateY(0deg)"}); this.parentNode.style.zIndex = '1'; $(this).mouseleave(function() { $(this).css({"-webkit-transform-style":"preserve-3d", "background-color":"blue", "box-shadow":"", "-webkit-transition:":"all .2s ease-out", "zoom":"", "z-index":"1", "-webkit-transform":"rotateY(45deg)"}); this.parentNode.style.zIndex = '0'; }); }); </code></pre> <p><a href="http://jsfiddle.net/aPKh6/10/" rel="nofollow">http://jsfiddle.net/aPKh6/10/</a></p> <p>Also, id's shouldn't be used on multiple elements. It's invalid and it also limits your ability to do more efficient element selection with javascript.</p> <p>There is also the potential of firing multiple events at once when you nest an event listener inside of a listener's function, but I don't know if jQuery takes care of this for you or not. I've always found it better to declare them separately and use a flag to see if one was fired before the other.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload