So, I have an empty <span> that is nested in the direction of my <li> unordered list. The space contains a background image that should appear on :hover . The problem is that during the animation transition, the z-index is wrong, the <span> added immediately before the <a> element that precedes it in the DOM. However, as soon as the animation finishes, the stacking order is corrected. The result is a visual sudden snap to the effect, and the link becomes fuzzy throughout the CSS3 transition period.
Can anyone break what happens at the DOM level? How can i fix this?
You can see a working example demonstrating the problem here: http://jsfiddle.net/qZkfw/1/
My html
<div id="nav"> <ul id="nav-main"> <li><a href="#">Home</a><span></span></li> <li><a href="#">About</a><span></span></li> <li><a href="#">Get Fit</a><span></span> <ul class="nav-secondary"> <li><a href="#">Exercise Library</a></li> <li><a href="#">Find An Instructor</a></li> <li><a href="#">Fitness Tools</a></li> </ul> </li> <li><a href="#">Find An Instructor</a><span></span></li> <li><a href="#">Get Certified</a><span></span></li> </ul> </div>
my CSS
#nav-main li { margin:0; padding:5px; position: relative; display: block; float: left; margin-left: 10px; } #nav-main li a { color: #97dd6e; font-size: 1.1em; text-decoration: none; text-align: center; margin-right: -7px; line-height: 19px; z-index: 99; } #nav-main li span { height: 28px; background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center; display: block; margin: -22px -5px 0 2px; padding: 3px 0 0 0; z-index: 98; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #nav-main li:hover span { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #nav-main li span:before, #nav-main li span:after { content: ''; height: 28px; width: 7px; display: block; background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top; position: absolute; top: 2px; left: 0; z-index: 999; } #nav-main li span:after { background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top; left: 100%; }
source share