logo标签列表

CSS3 :hover动画存在z-index bug

debugginguser-interfacecss
6
好的，我有一个空的标签，嵌套在我的无序列表
  • 中。该标签包含一个背景图像，应在: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%;
}
    • 1个回答
    6
    Add position:relative; z-index: -1; to #nav-main li span. Updated jsfiddle. Edit: I figured it out.
    Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a. Updated jsfiddle.
    这很好，但是我有一个#nav-main的背景图片。看看当你给<li>的父元素添加背景时，演示会发生什么：http://jsfiddle.net/qZkfw/3/ - Brian
    将 position:absolute; z-index:-2; 添加到 #nav-main。 - bookcasey
    LOL。但是当你这样做时，它会消失在<body>后面。除了负z-index之外，还有其他方法吗？那真的不起作用... - Brian
    1
    我弄清楚了，Brian。我不知道Stack Overflow是否会在您的收件箱中添加编辑内容，因此我也会在此处添加以便通知您。静态元素不遵守z-index，因此您需要将#nav-main li a添加position:relative;。 - bookcasey
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接