好的,我有一个空的标签,嵌套在我的无序列表中。该标签包含一个背景图像,应在:hover时出现。问题是,在动画过渡时,z-index值错误,标签会堆叠在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%;
}
#nav-main
的背景图片。看看当你给<li>
的父元素添加背景时,演示会发生什么:http://jsfiddle.net/qZkfw/3/ - Brianposition:absolute; z-index:-2;
添加到#nav-main
。 - bookcasey<body>
后面。除了负z-index之外,还有其他方法吗?那真的不起作用... - Brian#nav-main li a
添加position:relative;
。 - bookcasey