问题

我希望在按钮被禁用时，当我悬停在按钮上时渲染一个元素。

我的应用组件：

```Javascript
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;
}`;

我尝试在按钮的 CSS 中添加 pointer-events: all !important;，但不起作用。

<details>
<summary>英文:</summary>

I want to render an element when I hover hover a button when it is disabled.

My app component:

```Javascript
import React, { useState } from &quot;react&quot;;

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

and my StyledGlButton:

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

I tried adding pointer-events: all !important; in the css of the button but it is not working.

答案1

得分: 1

你可以用 span 包围 button，并将该按钮设置为 pointer-events: none，这样 span 可以监听事件。

<span><button disabled>Button</button></span>

button {
  pointer-events: none;
}

const button = document.querySelector('button');
const span = document.querySelector('span');
span.addEventListener('mouseover', (e) => {
  console.log('hovered');
});

const button = document.querySelector('button');
const span = document.querySelector('span');
span.addEventListener('mouseover', (e) => {
  console.log('hovered');
});

button {
  pointer-events:none
}

<span><button disabled>Button</button></span>

答案2

得分: 1

以下是翻译好的部分：

"I may well be that React simply disables the mouseover event of a disabled element by giving it pointer-events: none. I don't use React, but this is what I expect their solution to be."

"可能React只是通过将pointer-events属性设置为none来禁用禁用元素的鼠标悬停事件。我不使用React，但这是我期望他们的解决方案的方式。"

"Worse would be React catching the event in JS and doing nothing with it (would probably go against W3C specs). In that case the solution by @Mina would be best to use."

"更糟糕的是，React可能会在JavaScript中捕获事件，但不做任何处理（这可能违反了W3C规范）。在这种情况下，@Mina提出的解决方案可能是最好的选择。"

"pointer-events: all as you mention is meant for SVG elements only, use pointer-events: auto instead."

"正如你提到的，pointer-events: all只适用于SVG元素，请改用pointer-events: auto。"

"Here's a little snippet that shows two disabled buttons and a hidden element that only shows when hovered over disabled button two."

"这里有一个小片段，显示了两个禁用的按钮和一个隐藏元素，只有在鼠标悬停在禁用按钮two上时才显示。"

（代码部分未翻译）

/* To prove a [disabled] element
   listens to 'mouseover' event */
button:hover         { color: red }

/* The hidden element */
.render              { display: none }
button:hover~.render { display: block }

/* Expected React 'disabled' solution */
.one { pointer-events: none }
/* To prove pointer events can be disabled */

/* Override(?) React solution */
.two:is(:disabled,
        [disabled],
        [disabled=true],
        [disabled="true"])
   { pointer-events: auto !important }
    /* !important may be required for React */

<button class="one" disabled>one</button>
<button class="two" disabled>two</button>
<div class="render">rendered</div>