如何用CSS定位另一个div下方的元素？hover第二个div选中第一个div

嘿，我完全懂你的困扰！你现在遇到的是CSS选择器的一个核心局限性：CSS只能选择当前元素之后的兄弟元素，没法直接选中它前面的元素。你用的#container #two:hover + #one之所以无效，就是因为+相邻兄弟选择器只能匹配当前元素紧接的下一个兄弟，而#one在#two的前面，根本不在这个选择器的匹配范围内～

下面给你两种可行的解决方案，根据你的需求选就行：

方案1：微调HTML结构+CSS保持视觉顺序（纯CSS实现） #

如果可以稍微调整HTML的元素顺序，我们把#two放在#one前面，然后用Flex布局的order属性让它们在页面上显示成原来的顺序，这样就能用兄弟选择器实现效果了：

调整后的HTML #

<div id="container">
  <div id="two">Some more text.</div>
  <div id="one">Some text.</div>
</div>

对应的CSS #

#container {
  display: flex;
  flex-direction: column;
}
/* 用order属性调整视觉顺序，让#one显示在#two前面 */
#one {
  order: 1;
}
#two {
  order: 2;
  width: 50vw;
}

#two:hover {
  width: 90vw;
}
/* 现在#one是#two的下一个相邻兄弟，这个选择器能正常生效！ */
#two:hover + #one {
  width: 10vw;
}

方案2：不修改HTML，用JavaScript实现 #

如果没法调整HTML结构，那就用JavaScript来监听#two的悬停事件，动态修改#one的样式：

原HTML保持不变 #

<div id="container">
  <div id="one">Some text.</div>
  <div id="two">Some more text.</div>
</div>

CSS（新增一个用于修改样式的类） #

#container #two {
  width: 50vw;
}
#container #two:hover {
  width: 90vw;
}
/* 定义悬停时#one的样式 */
#container #one.hovered {
  width: 10vw;
}

JavaScript代码 #

// 获取元素
const targetDiv = document.getElementById('two');
const targetPrevDiv = document.getElementById('one');

// 监听鼠标进入事件
targetDiv.addEventListener('mouseenter', () => {
  targetPrevDiv.classList.add('hovered');
});

// 监听鼠标离开事件
targetDiv.addEventListener('mouseleave', () => {
  targetPrevDiv.classList.remove('hovered');
});

补充说明 #

CSS的所有兄弟选择器（+相邻兄弟、~通用兄弟）都是向后查找的，只能匹配当前元素之后的兄弟节点，这是CSS选择器的设计规则。所以如果要选中前序兄弟，要么调整结构配合CSS，要么用JavaScript来实现交互逻辑～

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