css 当鼠标悬停在禁用的按钮上时如何呈现元素？

lstz6jyr 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(171)

我想呈现一个元素，当我悬停在一个按钮，当它被禁用。
我的应用程序组件：

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;，但它不起作用。

css

来源：https://stackoverflow.com/questions/75554032/how-to-render-an-element-when-hovering-over-a-disabled-button

2条答案

按热度按时间

au9on6nz1#

我很可能认为 * React * 只是通过提供pointer-events: none来禁用 [disabled] 元素的mouseover事件。我没有使用 * React *，但这是我期望他们的解决方案。
更糟糕的是 * React * 在JS中捕获事件而不对它做任何事情（可能会违反W3C规范）。在这种情况下，最好使用@Mina的解决方案。

- pointer-events: all正如您提到的，仅适用于SVG元素，请改用pointer-events: auto**。

这里有一个小片段，显示了两个disabled按钮和一个隐藏元素，只有当鼠标悬停在disabled按钮 * 两个 * 上时才会显示。

/* 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>

赞(0）回复(0）举报 2023-02-26

7vux5j2d2#

您可以用span包围button，并将该按钮指定为pointer-events: none，这样span就可以侦听事件。

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>

赞(0）回复(0）举报 2023-02-26

我来回答

css 当鼠标悬停在禁用的按钮上时如何呈现元素？

2条答案

相关问题

热门标签

最新问答