Question

对于新的网页设计，我尝试使用CSS过渡和z-index控制两个50％宽度的图层，但似乎存在冲突：z-index似乎太慢了。正如您在小提琴中看到的那样，白色框在悬停时隐藏在右滑块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：我在这个论坛上发布自己的问题我很新，所以如果我违反任何规则，我很抱歉。除此之外，我的英语不是最好的，因为它不是我的母语（我是荷兰人）。但请帮助我！

Answer 1

看起来问题仅在Chrome中，但在FF中没有。你需要做的是在包装容器上设置一个较小的z-index，如下所示

.wrap {
  z-index:1;
}

应该修复它，这里是更新的JSFIDDLE

Answer 2

在转换声明中添加z-index。这应该会阻止z-index在转换之前执行

        <! Legend to group player information>
        <legend class="legend_player_information" align="center">Player Information</legend>

        <! Table labeling the table within player information>
        <table class="table_player_information" align="center">

            <! Row 1 within player information>
            <tr class="row_player_information_name">
                <td class="element_player_information_name_label" valign="top"><label for="element_player_information_name_label">Name:</label></td>

                <td class="element_player_information_name_text" valign="top"><input type="text" placeholder="Name" name="element_player_information_name_text" maxlength="50" size="20"></td>

                <td class="element_player_information_nickname_label" valign="top"><label for="element_player_information_nickname_label">Nickname:</label></td>

                <td class="element_player_information_nickname_text" valign="top"><input type="text" placeholder="Nickname" name="element_player_information_nickname_text" maxlength="30" size="20"></td>
            </tr>

            <! Row 2 within player information>
            <tr class="row_player_information_email_address">

                <td class="element_player_information_email_address_label" valign="top"><label for="element_player_information_email_address_label">Email Address:</label></td>

                <td class="element_player_information_email_address_text" valign="top"><input type="text" placeholder="Email Address" name="element_player_information_email_address_text" maxlength="50" size="20"></td>

                <td class="element_player_information_school_label" valign="top"><label for="element_player_information_school_label">School:</label></td>

                <td class="element_player_information_school_text" valign="top"><input type="text" placeholder="School" name="element_player_information_school_text" maxlength="30" size="20"></td>
            </tr>

CSS转换和z-index冲突

2 个答案: