辅助悬停过渡不起作用答案

【问题标题】：Secondary hover transition not working辅助悬停过渡不起作用
【发布时间】：2015-10-11 13:19:22
【问题描述】：

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 应该将它放在悬停的顶部，就像在原件。

【问题讨论】：

标签： html css hover

【解决方案1】：

.wrap1 被隐藏了，因为它位于 400x400“X”图像的下方（而不是后面），所以我将其向上移动了 400 像素。

.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);
}

【讨论】：