Question

TEMPLATE

我正在尝试修改此模板以允许它，而不是在一个400x400图像上进行白色X转换，而是将其分成由线分隔的四个不同图像，然后适当地转换使用X平展，然后在悬停时调出文本字段。我做到了这一点，并从理论上解决了多个图像和过渡效果：

.topImage {
width: 400px;
height: 200px;
background-color: blue;
}
.botImage {
width: 400px;
height: 200px;
background-color: red;
}
.leftImageContainer {
position: absolute;
width: 400px;
height: 400px;
border: 0px solid black;
top: 0;
left: -200px;
overflow: hidden;
}
.leftImage {
width: 400px;
height: 400px;
background-color: green;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
position: absolute;
top: 0;
left: -83px;
}
.rightImageContainer {
position: absolute;
border: 0px solid black;
width: 400px;
height: 400px;
top: 0;
right: -200px;
overflow: hidden;
}
.rightImage {
width: 400px;
height: 400px;
background-color: purple;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
position: absolute;
top: 0;
right: -83px;
}
#xdiv:hover .leftImageContainer {
height: 0;
top: 200px;
transition: all 0.5s;
}
#xdiv:hover .leftImage {
top: -200px;
transition: all 0.5s;
}
#xdiv:hover .rightImageContainer {
height: 0;
top: 200px;
transition: all 0.5s;
}
#xdiv:hover .rightImage {
top: -200px;
transition: all 0.5s;
}

DEMO

但由于某种原因，我无法获得与wrap1和wrap2一起出现的悬停转换。我不确定这是否是最好的方法，但我不确定为什么悬停效果没有显示，因为它的z-index应该在悬停时将它放在顶部就像在原来。

Answer 1

.wrap1隐藏在视野之外，因为它位于400x400＆＃34; X＆＃34;之下（而非后方）图像，所以我把它移动了400px。

.wrap1 {
    width: 400px;
    z-index: 99;
    overflow: hidden;
    position: relative;

    top: -400px; /*Move .wrap1 up into view*/

    height: 0px;
    margin: 0px;
    margin-top: 200px;
    background-color: #FFF;
    transition: height 1s 0.5s, margin-top 1s 0.5s;
    background-color: rgba(255, 255, 255, 0.3);
}

辅助悬停转换不起作用

1 个答案: