CSS转换与z索引冲突
对于一个新的Web设计,我试图用CSS转换和z索引控制两个50%宽度的层,但似乎存在冲突:z索引似乎太慢了。正如您在小提琴中看到的,白色框隐藏在右滑块div on hover的后面,直到过渡完成。有没有比这更有效的替代方案?还是有别的办法?任何帮助都将不胜感激 这是我的CSS:CSS转换与z索引冲突,css,z-index,css-transitions,transitions,Css,Z Index,Css Transitions,Transitions,对于一个新的Web设计,我试图用CSS转换和z索引控制两个50%宽度的层,但似乎存在冲突:z索引似乎太慢了。正如您在小提琴中看到的,白色框隐藏在右滑块div on hover的后面,直到过渡完成。有没有比这更有效的替代方案?还是有别的办法?任何帮助都将不胜感激 这是我的CSS: body { background:black; } div { -webkit-transition:opacity 0.6s ease, width 0.6s ease; transition
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);
}
这是我的答案
附言:我是一个在这个论坛上发布我自己问题的新手,所以如果我不遵守任何规则,我很抱歉。除此之外,我的英语不是最好的,因为它不是我的母语(我是荷兰人)。但是请帮帮我 看起来问题只出现在Chrome上,而不是FF上。您需要做的是在包装容器上设置一个较小的z索引,如下所示
.wrap {
z-index:1;
}
这应该可以解决这个问题,下面是更新后的在转换声明中添加z-index。这将在转换之前停止执行z索引
-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;
“慢z-index”是什么意思?如果你检查小提琴,你会发现z-index太慢了,因为右滑动部分顶部的白色框隐藏在悬停时的框后面。这是因为你设置的宽度为0.6秒,如果你想快,请将其更改为0.3秒。我想我知道他的意思。出于某种原因,尽管徽标的z索引为99,而幻灯片悬停时有2或3个,但徽标仍在z轴上,直到悬停动画完成(仅出现在右侧幻灯片上),它与左侧幻灯片的效果良好。@Deathmras:不幸的是,这并不能解决我的问题……就是它!非常感谢!:)我建议写一个新问题:)在转换中添加一个z-索引有效,但这没有。好吧,这似乎对我也有效,尽管@Kazim Hussain answers可能也有效。现在的问题是它为什么要这样做?关于这一点,是否有更多的文件化问题?