Debugging CSS3:悬停动画有z索引错误
好的,我有一个空的Debugging CSS3:悬停动画有z索引错误,debugging,user-interface,css,Debugging,User Interface,Css,好的,我有一个空的,它嵌套在无序列表的一侧。span保存的背景图像应显示在:hover上。问题在于,当动画正在转换时,z索引是错误的,将自身堆叠在 我的HTML <div id="nav"> <ul id="nav-main"> <li><a href="#">Home</a><span></span></li> &l
,它嵌套在无序列表的
一侧。span保存的背景图像应显示在:hover
上。问题在于,当动画正在转换时,z索引是错误的,
将自身堆叠在
我的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>
添加位置:相对;z指数:-1代码>至#导航主li span
编辑:
我想出来了
静态元素不符合z-index
,因此需要添加位置:相对代码>至#导航主通道a
.那很好,但是我有一张#nav main
的背景图像。看看当你向的父对象添加背景时,演示会发生什么:添加位置:绝对;z指数:-2代码>至#导航主设备
.LOL。但当您这样做时,它会消失在
后面。除了负z指数还有别的方法吗?这不是真的…我知道了,布莱恩。我不知道堆栈溢出是否会在您的收件箱中进行编辑,所以我也会将其添加到此处,以便随时向您发布。静态元素不服从z索引,所以需要添加position:relative
到#nav main LIA
。就是这样@bookcasey!谢谢
#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%;
}