Хорошо, у меня есть пустой <span>, который вложен в мои <li> из неупорядоченного списка.Диапазон содержит фоновое изображение, которое должно появиться на :hover.Проблема заключается в том, что во время перехода анимации z-индекс неверен, <span> ставится перед элементом <a>, который предшествует ему в DOM.Однако, как только анимация завершается, порядок наложения исправляется.Результатом является визуальный внезапный «щелчок» эффекта, а также ссылка становится неприкосновенной на время перехода CSS3.
Может кто-нибудь сломать то, что происходит на уровне DOM?Как я могу это исправить?
Рабочий пример, демонстрирующий эту проблему, можно увидеть здесь: http://jsfiddle.net/qZkfw/1/
Мой 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>
мой 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%;
}