悬停动画在CSS中的行为不正常

Question

将这个div表示为.total，我试图做这个悬停动画，当我悬停两个元素之一时，不透明度和宽度会改变。当我将鼠标悬停在左侧元素时，宽度的变化是平滑的，但是当我将鼠标悬停在右侧元素时，宽度变化几乎不存在。

codepen：https://codepen.io/aronnora/pen/eYNazyV

html

<div class="total">
    <div class="one">
      <img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>

      <div class="downtextone">
  時メユ郎
      </div>
    </div>
    <div class="two">
      <img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
      <div class="downtexttwo">
        時メユ
      </div>
    </div>
    </div>

CSS

.total:hover > div{
  opacity: 0;
}
.total:hover > div:hover{
  z-index: 20;
  opacity: 1;
  width:90rem;
}
.total:hover > :not(.div:hover){
  width:0;
}
.one:hover > .downtextone{
  text-align: center;
  opacity:1;
}
.two:hover > .downtexttwo{
  text-align: center;
  width:90rem;
  opacity:1;
}
.one:hover > .Kakashi{
  padding-left: 33rem;
}
.two:hover > .Madara{
}

.two:hover{
  height:auto;
  width:90rem;
}

Answer 1

我使用一些绝对的位置来解决它。

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  width: 50%;
  height: 500px;
  background: black;
  z-index: 1;
  transition: all 0.5s ease;
}

.left:hover {
  width: 100%;
  left: 0;
}

.right {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 500px;
  background: grey;
  transition: all 0.5s ease;
}

.right:hover {
  width: 100%;
  left: 0;
  z-index: 1;
}

https://codepen.io/camwes89/pen/WNvBomb