如何使用 CSS 在悬停时无缝增长/缩小元素？

问题描述

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

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

有什么想法吗？我找到了一些关于父母/子女关系的答案，并尝试了一些，但没有成功。

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

#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,1),rgba(255,165,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,0),rgba(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>

解决方法

您的代码的问题是 #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>

hover html