父li悬停触发子元素动画及子元素点击事件冒泡至父元素问题

一、父元素悬停时触发子元素的动画 #

在styled-components中，可通过父元素的:hover伪类直接控制子元素样式，实现父元素悬停时激活子元素的动画效果：

// 定义子元素HoverEffectText（label）
const HoverEffectText = styled.label`
  /* 基础样式 */
  transition: all 0.3s ease;
  color: #333;

  /* 保留子元素单独悬停的动画（可选） */
  &:hover {
    color: #ff5722;
    transform: translateX(4px);
  }
`;

// 定义父元素TabItem（li）
const TabItem = styled.li`
  /* 父元素基础样式 */
  padding: 8px 16px;
  cursor: pointer;

  /* 父元素悬停时，触发子元素动画 */
  &:hover ${HoverEffectText} {
    color: #ff5722;
    transform: translateX(4px);
  }

  /* 激活状态下的子元素样式 */
  &.active {
    font-weight: bold;
    ${HoverEffectText} {
      color: #ff5722;
      transform: translateX(4px);
    }
  }
`;

这样无论悬停在父li的空白区域还是子label上，都会触发子元素的动画，同时也保留了子元素单独悬停的交互效果。

二、让子元素点击事件正确触发父元素的onClick #

问题核心不是事件未冒泡，而是点击子元素时e.target指向无id的label，导致setActiveTab无法获取正确值。解决方法有两种：

方法1：使用e.currentTarget获取绑定事件的父元素 #

currentTarget始终指向绑定onClick的父li元素，不受点击位置影响：

const handleClick = (e) => {
  setActiveTab(e.currentTarget.id);
};

方法2：让子元素不拦截点击事件（适合无独立交互需求的场景） #

给子元素添加pointer-events: none，点击子元素会直接触发父元素的点击事件，但会让子元素失去所有交互能力（如无法选中文字）：

const HoverEffectText = styled.label`
  pointer-events: none;
  /* 其他样式... */
`;

推荐使用方法1，既保留子元素的交互性，又能正确触发父元素的事件逻辑。

修改后的完整代码示例 #

import { useState } from 'react';
import styled from 'styled-components';

const Tabs = styled.div`
  /* Tabs容器样式 */
`;

const TabList = styled.ul`
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px;
`;

const TabItem = styled.li`
  padding: 8px 16px;
  cursor: pointer;

  &:hover ${HoverEffectText} {
    color: #ff5722;
    transform: translateX(4px);
  }

  &.active {
    font-weight: bold;
    ${HoverEffectText} {
      color: #ff5722;
      transform: translateX(4px);
    }
  }
`;

const HoverEffectText = styled.label`
  transition: all 0.3s ease;
  color: #333;
`;

const YourComponent = ({ data }) => {
  const [activeTab, setActiveTab] = useState('1');

  const handleClick = (e) => {
    setActiveTab(e.currentTarget.id);
  };

  return (
    <Tabs>
      <TabList>
        {data.map(({ id, job }) => {
          const tabId = id.toString();
          return (
            <TabItem
              key={id}
              id={tabId}
              onClick={handleClick}
              className={activeTab === tabId ? 'active' : ''}
            >
              <HoverEffectText>{job}</HoverEffectText>
            </TabItem>
          );
        })}
      </TabList>
      {/* 其他内容... */}
    </Tabs>
  );
};

export default YourComponent;

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