CSS过渡和z-index冲突

Question

CSS过渡和z-index冲突

7

为了一个新的网页设计，我正在尝试使用CSS过渡和z-index控制两个50%宽度的层，但似乎存在冲突：z-index似乎太慢了。正如您在fiddle中看到的，当悬停时，白色框隐藏在右边滑块div后面，直到过渡完成。有没有更快的替代方法？还是有其他方法可以实现？非常感谢您的帮助！

这是我的CSS：

body {
    background:black;
}
div {
    -webkit-transition:opacity 0.6s ease, width 0.6s ease;
    transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    -webkit-transform:skew(-15deg);
    -moz-transform:skew(-15deg);
    -ms-transform:skew(-15deg);
    -o-transform:skew(-15deg);
    transform:skew(-15deg);
    z-index:2;
}
.slide:hover {
    width:60%;
    z-index:3;
}
.slide#left {
    left:0;
}
.slide#right {
    right:0;
}
.wrap {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.inner {
    width:100%;
    height:100%;
    -webkit-transform:skew(15deg) scale(1.5);
    transform:skew(15deg) scale(1.5);
    opacity:0.5;
    position:absolute;
}
.inner:hover {
    opacity:1;
}
.inner#left {
    background:url(//savado.nl/new/key.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.inner#right {
    background:url(//savado.nl/new/code2.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.slide .logo {
    position:absolute;
    z-index:99;
    top:50%;
    height:20%;
    padding-left:20%;
    background:white;
}
.logo#left {
    right:0;
    -webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(50%) translateY(-50%) skew(15deg);
    transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
    left:0;
    -webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(-50%) translateY(-50%) skew(15deg);
    transform:translateX(-50%) translateY(-50%) skew(15deg);
}

这里是fiddle代码示例链接！

PS：我是第一次在这个论坛上发布自己的问题，如果违反了任何规则，请谅解。此外，我的英语不是很好，因为它不是我的母语（我是荷兰人）。但是请帮助我！

- Savado

2

"slow z-index" 是什么意思？ - Paulie_D

如果您检查Fiddle，您会发现z-index太慢了，因为右滑动部分顶部的白色框在悬停时被隐藏在盒子后面。 - Savado

这是因为您设置了0.6秒的宽度，如果您想要更快，请将其更改为0.3秒。 - Deathmras

我知道他的意思，我想。由于某种原因，即使标志具有z-index 99，而幻灯片在悬停时只有2或3，但标志仍然在z轴上落后，直到悬停动画完成，这仅发生在右侧幻灯片上，在左侧的那个上运作良好。 - Matthew Abrman

@Deathmras：不幸的是，那并没有解决我的问题... - Savado

@MatthewAbrman：这正是我想表达的！ - Savado

2个回答

4

在你的过渡声明中添加 z-index。这样可以防止 z-index 在过渡之前执行。

-webkit-transition:opacity 0.6s ease, width 0.6s ease,z-index 0.6s;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s;

- Kazim Hussain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amir5000 · Accepted Answer

看起来问题仅出现在Chrome中，而不是FF中。你需要做的是在包装容器上设置较小的z-index，如下所示：

.wrap {
  z-index:1;
}

这应该可以解决问题，这里是更新后的JSFIDDLE