CSS中一个类内如何选中其他类？React导航栏悬停时怎么修改子组件样式

方式1：纯CSS实现（最简方案，无需修改React逻辑） #

这个方案直接利用CSS父元素伪类选择子元素的规则即可实现，不需要调整现有组件的结构，只要提前约定好子组件的固定类名：

1. 给Navbar父组件的根元素定义类名navbar-container，三个子组件分别约定固定类名：menu-component、logo-component、action-btn-component
2. 直接写对应的CSS规则即可：

/* 初始状态 */
.navbar-container {
  background: transparent;
  transition: background 0.3s ease;
}
.menu-component, .logo-component, .action-btn-component {
  background: black;
  transition: background 0.3s ease;
}

/* Navbar整体被悬停时的状态 */
.navbar-container:hover {
  background: white;
}
/* 父元素悬停时直接选中所有子组件的类 */
.navbar-container:hover .menu-component,
.navbar-container:hover .logo-component,
.navbar-container:hover .action-btn-component {
  background: white;
}

注意：需要删掉之前给单个子组件写的:hover相关CSS规则，避免样式冲突。

方式2：React状态控制实现（适合后续有更复杂交互逻辑的场景） #

如果后续需要在悬停时触发其他JS逻辑，可以用React状态透传的方式实现：

1. 父组件Navbar维护悬停状态，通过props传递给所有子组件：

import { useState } from 'react';
import Menu from './Menu';
import Logo from './Logo';
import ActionBtn from './ActionBtn';

const Navbar = () => {
  const [isNavbarHover, setIsNavbarHover] = useState(false);
  return (
    <div 
      className="navbar-container"
      onMouseEnter={() => setIsNavbarHover(true)}
      onMouseLeave={() => setIsNavbarHover(false)}
    >
      <Menu isNavbarHover={isNavbarHover} />
      <Logo isNavbarHover={isNavbarHover} />
      <ActionBtn isNavbarHover={isNavbarHover} />
    </div>
  )
}
export default Navbar;

2. 子组件接收状态后动态绑定类名即可，以Menu组件为例：

const Menu = ({ isNavbarHover }) => {
  return (
    <div className={`menu-component ${isNavbarHover ? 'hover-style' : ''}`}>
      {/* 菜单内容 */}
    </div>
  )
}

对应的CSS规则：

.menu-component.hover-style {
  background: white;
}

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