过渡问题：z-index 超过宽度

Question

I have 2 blocks that are each 50% of the page width.我有 2 个块，每个块都是页面宽度的 50%。 When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover).当我 hover 这两个块之一时，它会占据页面的 95%，并且必须在第二个块上使用 go（因此悬停时 z-index 的增加）。 When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.当我将我的 cursor 从一个块直接切换到另一个块时，我们注意到从某个点开始，宽度的 animation 被 z-index 的变化覆盖。

I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.我正在寻找一种解决方案，使 animation 优先于宽度，而不是 z-index，更平滑的效果，理想情况下不使用 javascript。

Here is my code:这是我的代码：

HTML: HTML：

<div class="page-wrap">
  <div class="horizontal__reveal">
    <div class="horizontal__reveal__block horizontal__reveal__block-left">
    </div>
    <div class="horizontal__reveal__block horizontal__reveal__block-right">
    </div>
  </div>  
</div>

CSS: CSS：

* {
  margin: 0;
  padding: 0;
}
html {
  background: #000;
  color: #fff;
}

.page-wrap {
  height: 100vh;
  width: 100vw;
}

.horizontal__reveal {
  position: relative;
  height: 100%;
  width: 100%;
  background: red;
}

.horizontal__reveal__block {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 100;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizontal__reveal__block:hover {
  z-index: 200;
  width: 95%;
}
.horizontal__reveal__block-left {
  background: blue;
  left: 0;
}

.horizontal__reveal__block-right {
  background: green;
  right: 0;
}

You can see it live here .你可以在这里看到它。

Answer 1

You can do that with omitting z-index when hover occurs.当发生 hover 时，您可以通过省略z-index来做到这一点。 Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:相反，您可以在CSS中使用相邻兄弟选择器 (+) ，如下所示：

 * { margin: 0; padding: 0; } html { background: #000; color: #fff; }.page-wrap { height: 100vh; width: 100vw; }.horizontal__reveal { position: relative; height: 100%; width: 100%; background: red; }.horizontal__reveal__block { cursor: pointer; position: absolute; top: 0; width: 50%; height: 100%; z-index: 100; transition: all 1s ease; display: flex; align-items: center; justify-content: center; }.horizontal__reveal__block:hover { /*z-index: 200;*/ width: 95%; }.horizontal__reveal__block:hover +.horizontal__reveal__block { width: 5%; }.horizontal__reveal__block-left { background: blue; left: 0; }.horizontal__reveal__block-right { background: green; right: 0; }

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="page-wrap"> <div class="horizontal__reveal"> <div class="horizontal__reveal__block horizontal__reveal__block-left"> </div> <div class="horizontal__reveal__block horizontal__reveal__block-right"> </div> </div> </div> </body> </html>

过渡问题：z-index 超过宽度

问题描述

1 个解决方案

解决方案1
1 2022-09-10 12:57:03

过渡问题：z-index 超过宽度

问题描述

1 个解决方案

解决方案1 1 2022-09-10 12:57:03

解决方案1
1 2022-09-10 12:57:03