如何在悬停禁用按钮时渲染元素？

问题说明 #

需要实现悬停在禁用状态的按钮上时，渲染指定元素，但给按钮添加pointer-events: all !important;后并未生效，现有代码如下：

App组件代码 #

import React, { useState } from "react";

function App() {
    const [hover, setHover] = useState(false);
    
    const onHover = () => {
        setHover(true);
    };
    
    const onLeave = () => {
        setHover(false);
    };
    
    
    return (
        <div className="App" style={appStyles}>
            <StyledGlButton
                className = "dis-btn"
                onMouseEnter={onHover}
                onMouseLeave={onLeave}
                disabled = {isDisabled}
            >
                Red
            </StyledGlButton>
            {(hover && isDisabled) && ( 
                <h1>Disabled Button!!</h1>
            )}    
        </div>
    );
}
        
export default App;

StyledGlButton代码 #

export const StyledGlButton = styled(GlButton)<GlButtonProps>`
    &.gl-cta {
    font-size: 14px;
    height: 3rem;
    min-height: auto;
    pointer-events: all !important;
}`;

解决方案 #

方案1：修正样式选择器优先级 #

浏览器会给禁用的原生按钮默认设置pointer-events: none，你的样式可能因选择器优先级不足未覆盖默认规则。调整StyledGlButton的样式，直接针对按钮禁用状态设置，确保优先级足够：

export const StyledGlButton = styled(GlButton)<GlButtonProps>`
    font-size: 14px;
    height: 3rem;
    min-height: auto;
    // 明确针对禁用状态的按钮设置指针事件
    &:disabled {
        pointer-events: all !important;
    }
`;

方案2：用容器包裹按钮捕获悬停事件 #

如果方案1无效（比如第三方组件GlButton内部强制禁用了指针事件），可以给按钮套一个容器，把悬停事件绑定在容器上：

import React, { useState } from "react";

function App() {
    const [hover, setHover] = useState(false);
    
    const onHover = () => {
        if (isDisabled) { // 仅当按钮禁用时触发状态变更
            setHover(true);
        }
    };
    
    const onLeave = () => {
        setHover(false);
    };
    
    return (
        <div className="App" style={appStyles}>
            {/* 用容器包裹按钮，绑定悬停事件 */}
            <div 
                style={{ display: "inline-block", position: "relative" }}
                onMouseEnter={onHover}
                onMouseLeave={onLeave}
            >
                <StyledGlButton
                    className="dis-btn"
                    disabled={isDisabled}
                >
                    Red
                </StyledGlButton>
            </div>
            {(hover && isDisabled) && ( 
                <h1>Disabled Button!!</h1>
            )}    
        </div>
    );
}
        
export default App;

核心逻辑：禁用按钮本身无法响应鼠标事件，但外层容器可以捕获悬停动作，再结合isDisabled状态控制元素渲染。

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