我試圖實現與 Navy.com 標題類似的效果，您將鼠標懸停在一個兄弟姐妹上，它會滑動以占用大部分空間，同時縮小和隱藏另一個兄弟姐妹的內容。由于CSS標準不能選擇以前的兄弟，所以我只能實現一側而不是另一側的效果。我知道僅使用 CSS 可能無法做到這一點。預先感謝您的幫助！這是我目前正在使用的代碼：.container {  display: flex;  flex-direction: row-reverse;}.b1 {  display: flex;  order: 2;  width: 50%;  height: 150px;  padding: 10px;  background-color: rgb(40, 251, 202);  transition: all 0.5s;}.b2 {  display: flex;  width: 50%;  order: 1;  height: 150px;  padding: 10px;  background-color: rgb(227, 29, 103);  transition: all 0.5s;}.b1:hover {  width: 80%;}.b2:hover {  width: 80%;}.b1:hover~.b2 {  background-color: rgba(227, 29, 103, 0.4);  width: 20%;}.b2:hover~.b1 {  background-color: rgba(40, 251, 202, 0.4);  width: 20%;}.b1:hover~.b2 span {  display: none;}.b2:hover~.b1 span {  display: none;}<div class="container">  <div class="b2">    <span>This content will show up directly in its container.</span>  </div>  <div class="b1">    <span>This content will show up directly in its container.</span>  </div></div>