如何在JSX中悬停DIV_2时修改无直接父级的DIV_1宽度

因为DIV_1和DIV_2的外层容器是同级关系，要通过CSS实现交互效果，核心是利用CSS :has()伪类（或兄弟选择器，视结构调整），结合JSX的样式方案实现。以下是具体步骤：

1. 调整DOM结构（推荐） #

给两个外层div添加一个共同的父容器，这样能更精准地控制样式作用范围：

<div className="parent-container">
  {/* DIV_1所在容器 */}
  <div className="div1-wrapper">
    <div className="div1">DIV_1</div>
  </div>
  {/* DIV_2所在容器 */}
  <div className="div2-wrapper">
    <div className="div2">DIV_2</div>
  </div>
</div>

2. 用CSS类实现样式 #

通过:has()伪类检测DIV_2容器的hover状态，进而修改DIV_1的宽度：

/* 基础样式 */
.div1 {
  width: 100px;
  transition: width 0.3s; /* 平滑过渡效果 */
  background-color: #f0f0f0;
  padding: 8px;
}

.div2 {
  padding: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-top: 10px;
}

/* hover DIV_2时修改DIV_1宽度 */
.parent-container:has(.div2-wrapper:hover) .div1 {
  width: 250px;
}

3. 用CSS-in-JS（如styled-components）实现 #

如果项目使用CSS-in-JS方案，可直接在JSX中定义样式：

import styled from 'styled-components';

const ParentContainer = styled.div`
  /* 检测子元素hover状态，修改DIV_1样式 */
  &:has(.div2-wrapper:hover) .div1 {
    width: 250px;
  }
`;

const Div1Wrapper = styled.div`
  .div1 {
    width: 100px;
    transition: width 0.3s;
    background-color: #f0f0f0;
    padding: 8px;
  }
`;

const Div2Wrapper = styled.div`
  .div2 {
    padding: 8px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-top: 10px;
  }
`;

export default function Demo() {
  return (
    <ParentContainer>
      <Div1Wrapper>
        <div className="div1">DIV_1</div>
      </Div1Wrapper>
      <Div2Wrapper className="div2-wrapper">
        <div className="div2">DIV_2</div>
      </Div2Wrapper>
    </ParentContainer>
  );
}

注意事项 #

• 内联样式（通过style属性）无法实现伪类（如:hover）的交互效果，必须使用className或CSS-in-JS方案。
• :has()伪类支持现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），若需兼容旧浏览器，可考虑给DIV_2添加onMouseEnter/onMouseLeave事件，通过给DIV_1动态添加类名实现（但你提到state方案效果不佳，优先推荐:has()方案）。

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