React中鼠标悬停ProjectImage时同步修改ProjectCodeButton样式问题

我在React组件的render函数里渲染了项目列表，每个列表项包含ProjectImage图片、ProjectLiveVersionButton按钮和ProjectCodeButton按钮。需求是鼠标悬停在ProjectImage上时，ProjectCodeButton也同步应用缩放样式。试过把className换成ID、给CSS加.Section前缀、使用~/+/>等选择器组合，都没生效。当前用.ProjectImage:hover .ProjectCodeButton选择器设置过渡和缩放，达不到预期效果。

组件代码（JSX） #

render() {
  return (
    <div className="Section">
      <h1>Welcome to my Projects 😀</h1>

      <ul className="Projects">
        {this.state.Projects.map(project => (
          <li key={project._id} className="ProjectsShowcase">
            {" "}
            {/* 鼠标悬停这张图片时，希望另一个按钮也有相同效果 */}
            <img className="ProjectImage" src={project.image} alt=" of Project" />
            <button
              className="ProjectLiveVersionButton"
              disabled={!project.liveVersion}
              onClick={() => window.open(project.liveVersion)}
            >
              Live version
            </button>

            {/* 这是要随图片悬停变化的按钮 */}
            <button 
              className="ProjectCodebutton" onClick={() => window.open(project.Code)}>
              Code{" "}
            </button>
            {/* 这是要随图片悬停变化的按钮 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

尝试的CSS代码 #

/* 图片已经有相同样式，想让按钮也跟着变大，用了这段CSS但无效 */
.ProjectImage:hover .ProjectCodeButton {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  transform: scale(1.1);
}

问题原因与解决方法 #

1. 核心问题点 #

• 选择器逻辑错误：.ProjectImage:hover .ProjectCodeButton是后代选择器，只会匹配图片内部的按钮，但实际按钮和图片是同级元素（都在ProjectsShowcase列表项里），所以根本匹配不到目标元素。
• 类名拼写不一致：JSX里按钮的类名是ProjectCodebutton（小写b），但CSS里写的是ProjectCodeButton（大写B），大小写不匹配导致样式无法生效。

2. 修正后的CSS方案 #

使用通用兄弟选择器~选中图片之后的同级按钮，同时修正类名拼写：

/* 修正类名+兄弟选择器，匹配图片之后的所有同级按钮 */
.ProjectImage:hover ~ .ProjectCodebutton {
  transition: all 0.3s ease;
  transform: scale(1.1);
}
/* 给按钮添加初始过渡，保证缩放动画平滑过渡 */
.ProjectCodebutton {
  transition: all 0.3s ease;
}

如果只想匹配图片紧挨着的下一个元素，可改用相邻兄弟选择器+，但这里用~更适配当前DOM结构。

3. 更优体验方案：悬停父元素 #

如果希望用户悬停整个项目卡片时，图片和按钮都触发缩放效果，体验更连贯，可以把hover事件绑定到父元素ProjectsShowcase：

.ProjectsShowcase:hover .ProjectImage,
.ProjectsShowcase:hover .ProjectCodebutton {
  transition: all 0.3s ease;
  transform: scale(1.1);
}
/* 给目标元素添加初始过渡 */
.ProjectsShowcase .ProjectImage,
.ProjectsShowcase .ProjectCodebutton {
  transition: all 0.3s ease;
}

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