如何实现鼠标悬停Box2时Box1缩小且文字旋转、Box2放大？

当然可以用CSS实现这个交互效果，你当前代码的问题在于#box2:hover ~ #box1选择器无法生效——CSS的~兄弟选择器只能选中当前元素之后的同级元素，而Box1在Box2前面，所以这个选择器无法匹配到Box1。

下面是修正后的实现方案：

方法一：使用CSS :has() 伪类（现代浏览器支持） #

纯CSS即可实现需求，代码简洁高效：

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

h2 {
  font-size: 40px;
  /* 给文字添加过渡，让旋转/缩放更平滑 */
  transition: all 0.5s ease;
}

#box1 {
  position: relative;
  background: #154c79;
  height: 600px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  /* 给盒子添加过渡，确保缩放动画平滑 */
  transition: flex 2s ease;
}

#box2 {
  position: relative;
  background: #FBCEB1;
  height: 600px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: flex 2s ease;
}

/* 悬停Box1时的效果 */
#box1:hover {
  flex: 10;
}

#box1:hover ~ #box2 {
  flex: 1;
}

#box1:hover ~ #box2 h2 {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 50px;
}

/* 悬停Box2时的效果 */
#box2:hover {
  flex: 10;
}

/* 用:has()选中包含hover状态Box2的容器，再选中Box1 */
.container:has(#box2:hover) #box1 {
  flex: 1;
}

.container:has(#box2:hover) #box1 h2 {
  /* 文字旋转90度，也可以用writing-mode实现竖排，根据需求选择 */
  transform: rotate(90deg);
  font-size: 50px;
}

<div class="container">
  <div id="box1">
    <h2>Box 1</h2>
  </div>
  <div id="box2">
    <h2>Box 2</h2>
  </div>
</div>

关键修改说明： #

1. 修正了.container的选择器（原代码遗漏了类选择器的.）
2. 将transition属性移到盒子和文字的初始样式中，确保进入和离开hover状态时都有平滑过渡
3. 使用:has()伪类实现反向兄弟选择：当容器内的Box2被hover时，选中Box1并应用缩小和文字旋转样式
4. 用display: flex+align-items/justify-content替代text-align，更稳定地居中内容

方法二：JavaScript实现（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以用JavaScript监听鼠标事件，通过添加/移除类来实现效果：

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

h2 {
  font-size: 40px;
  transition: all 0.5s ease;
}

#box1 {
  position: relative;
  background: #154c79;
  height: 600px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: flex 2s ease;
}

#box2 {
  position: relative;
  background: #FBCEB1;
  height: 600px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: flex 2s ease;
}

/* 定义hover后的类样式 */
.box-large {
  flex: 10;
}

.box-small {
  flex: 1;
}

.text-rotated {
  transform: rotate(90deg);
  font-size: 50px;
}

.text-vertical {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 50px;
}

<div class="container">
  <div id="box1">
    <h2>Box 1</h2>
  </div>
  <div id="box2">
    <h2>Box 2</h2>
  </div>
</div>

<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box1Text = box1.querySelector('h2');
const box2Text = box2.querySelector('h2');

// Box1悬停事件
box1.addEventListener('mouseover', () => {
  box1.classList.add('box-large');
  box2.classList.add('box-small');
  box2Text.classList.add('text-vertical');
});

box1.addEventListener('mouseout', () => {
  box1.classList.remove('box-large');
  box2.classList.remove('box-small');
  box2Text.classList.remove('text-vertical');
});

// Box2悬停事件
box2.addEventListener('mouseover', () => {
  box2.classList.add('box-large');
  box1.classList.add('box-small');
  box1Text.classList.add('text-rotated');
});

box2.addEventListener('mouseout', () => {
  box2.classList.remove('box-large');
  box1.classList.remove('box-small');
  box1Text.classList.remove('text-rotated');
});
</script>

内容的提问来源于stack exchange，提问作者Lee93