对于新的网页设计,我试图通过 CSS 过渡和 z-index 来控制两个 50% 宽度的层,但似乎存在冲突:z-index 似乎太慢了。正如您在 fiddle 中看到的那样,悬停时白色框隐藏在右侧 slider 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:我是第一次在这个论坛上发布自己的问题,所以如果我不遵守任何规则,我很抱歉。除此之外,我的英语不是最好的,因为它不是我的母语(我是荷兰语)。但请帮帮我!
最佳答案
看起来问题只出现在 Chrome 而不是 FF。您需要做的是像这样在包装器容器上设置一个较小的 z-index
.wrap {
z-index:1;
}
这应该可以修复它,这里是更新的 JSFIDDLE
关于CSS transition 和 z-index 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24915584/