如何使用 CSS 在悬停时无缝 grow/shrink 元素？

Question

我对编码很陌生，我只想在 CSS 中做一些基本的事情。我有一个着陆页，它在中间分成两部分。在左侧，是一个黄色的div。在右边，一个灰色的div。当我将鼠标悬停在 div 上时，它会增加其宽度（ltr 表示左侧 div，rtl 表示右侧 div）。在同一个悬停事件中，我希望 OTHER div 减小其宽度。所以两者之间没有重叠。

使用代码，我的左侧 div 有效。悬停事件也有效。当我将鼠标悬停在左侧时。宽度上升到 51%，右侧 div 的宽度变为 49%。但是，右侧等效项不起作用。当我将鼠标悬停在右侧时。右侧 div 增加了它的宽度，但左侧 div 并没有减少 dwn 到 49%。右侧正好与左侧重叠。

有什么想法吗？我找到了一些关于 parent/child 关系的答案并试了一下但没有成功。

为我写得不好的代码道歉。我才刚刚起步，希望能得到一些建议。

#leftside {
  /*this is the orange half*/
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 0, 1), rgba(255, 165, 0, 1));
  transition: all 1s;
}

#leftside:hover {
  opacity: 1.0;
  width: 51%;
}

#leftside:hover+#rightside {
  width: 49%
}

#rightside {
  /*this is the grey half*/
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(160, 160, 160, 1));
  transition: all 1s;
}

#rightside:hover {
  opacity: 1.0;
  width: 51%;
}

#rightside:hover+#leftside {
  width: 49%
}

<div id="leftside">
  <a class="leftsidehome" href="page1.html"></a>
</div>
<div id="rightside">
  <a class="rightsidehome" href="page2.html"></a>
</div>

Answer 1

您的代码的问题是 #rightside:hover+#leftside 因为 CSS 无法回头。下面是使用 flexbox.

的可能解决方案

.container {
  display: flex;
  width: 100%;
}

#leftside,
#rightside {
  flex-grow: 1; /* Allow each flex item to grow */
  flex-shrink: 1; /* Allow each flex item to shrink */
  width: 50%;
  height: 100px; /* Used only to make them visible */
  transition: width 1s; /* Animate the change of width */
}

#leftside {
  background: yellow;
}

#rightside {
  background: grey;
}

#leftside:hover {
  width: 51%;
}

#rightside:hover {
  width: 51%;
}

<div class="container">
  <div id="leftside">
    <a class="leftsidehome" href="page1.html"></a>
  </div>
  <div id="rightside">
    <a class="rightsidehome" href="page2.html"></a>
  </div>
</div>

如何使用 CSS 在悬停时无缝 grow/shrink 元素？

How can I seamlessly grow/shrink elements on hover using CSS?

html

css

hover