Question 73822 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to render an element when hovering over a disabled button? – Reactjs

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

My app component:

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;

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.

Tags:

2

Answers


  1. 0

    You can surround the button with span and give that button pointer-events: none, so the span can listen to the events.

    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>
    Login or Signup to reply.
  2. 0

    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.

    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.

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

    Here’s a little snippet that shows two disabled buttons and a hidden element that only shows when hovered over disabled button 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search