LayeredButton组件：悬停Front Button时禁用父容器悬停效果

针对你遇到的「悬停Front Button时触发父div hover效果」的问题，提供以下几种可行方案：

方案1：纯CSS内联解决（无需JS，依赖:has()选择器） #

如果你的项目目标浏览器支持CSS :has()（现代主流浏览器均支持），可以直接通过Tailwind的内联选择器覆盖父div的hover样式：

return (
  <div className="bg-primary-bold hover:bg-primary-light-500 rounded-full active:bg-primary-bold-600 [&:has(#right-button:hover)]:bg-primary-bold">
    <Button
      id="left-button"
      buttonStyle="primary"
      fill="outline"
      spacing="hug"
      onClick={leftOnClick}
    >
      {leftLabel}
    </Button>
    <Button
      id="right-button"
      buttonStyle="transparent"
      fill="link"
      spacing="hug"
      onClick={rightOnClick}
    >
      {rightLabel}
    </Button>
  </div>
);

这里假设#right-button是你所说的Front Button，通过[&:has(#right-button:hover)]:bg-primary-bold指定：当Front Button处于悬停状态时，父div强制使用原本的bg-primary-bold背景色，覆盖hover状态的样式。

方案2：JS控制父元素类名（兼容旧浏览器） #

如果需要兼容不支持:has()的浏览器，可以通过监听Front Button的hover事件，动态给父div添加/移除类来禁用hover效果：

1. 引入useState管理悬停状态：

import { useState } from 'react';

// 组件内部
const [isFrontBtnHovered, setIsFrontBtnHovered] = useState(false);

2. 修改组件结构，添加hover事件监听：

return (
  <div className={`bg-primary-bold rounded-full active:bg-primary-bold-600 hover:bg-primary-light-500 ${isFrontBtnHovered ? 'no-parent-hover' : ''}`}>
    <Button
      id="left-button"
      buttonStyle="primary"
      fill="outline"
      spacing="hug"
      onClick={leftOnClick}
    >
      {leftLabel}
    </Button>
    <Button
      id="right-button"
      buttonStyle="transparent"
      fill="link"
      spacing="hug"
      onClick={rightOnClick}
      onMouseEnter={() => setIsFrontBtnHovered(true)}
      onMouseLeave={() => setIsFrontBtnHovered(false)}
    >
      {rightLabel}
    </Button>
  </div>
);

3. 添加全局CSS覆盖样式：

.no-parent-hover:hover {
  background-color: var(--primary-bold) !important;
}

注：var(--primary-bold)需要和你项目中bg-primary-bold对应的CSS变量一致，确保父div回到初始背景色。

方案3：修改Button组件的事件传递 #

如果允许修改内部Button组件，可以给Front Button添加事件阻止冒泡逻辑，从源头避免父div感知到悬停：

在Button组件的代码中，针对Front Button的配置（比如buttonStyle="transparent"或对应标识），添加事件处理：

// Button组件内部
const handleMouseEnter = (e) => {
  e.stopPropagation(); // 阻止事件冒泡到父div
  // 保留原有的hover逻辑...
};

const handleMouseLeave = (e) => {
  e.stopPropagation();
  // 保留原有的离开逻辑...
};

// 渲染时绑定事件
<button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
  {/* 按钮内容 */}
</button>

这种方式直接切断事件向上传递的路径，彻底避免父div触发hover效果。

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