0

For some reason, the onMouseLeave event isn't functioning as expected in React. It is firing when I hover over another element such as the navbar or console but doesn't fire when the mouse leaves the element.

function GameCard({name, about, image}) { 

    const [active, setActive] = React.useState(false)

    return ( 
        <div className={Styles.gameCard} onMouseOver={() => setActive(true)} onMouseLeave={() => setActive(false)}>
            {
                active 
                    ? <div className={Styles.gameCardInfo} >
                        <h1 className={Styles.gameCardName}>{name}</h1>
                        <h2 className={Styles.gameCardAbout}>{about}</h2>
                        <div className={Styles.play}>
                            <Fab color='secondary' onClick={() => console.log('working')}>
                                <PlayArrowIcon/>
                            </Fab>
                        </div>
                      </div>
                    : console.log('notactive')
                }
                <img  className={active ? `${Styles.gameCardImage} ${Styles.activeCardImage}` : `${Styles.gameCardImage}`} src={image}/>
        </div>
    )
}
norbitrial
  • 14,716
  • 7
  • 32
  • 59
cillsley
  • 37
  • 8
  • Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Nov 26 '19 at 16:35
  • It [seems to work in the simple case](https://jsfiddle.net/tjcrowder/5Leu81ra/), so we really need that MRE to know what's going on in your case. – T.J. Crowder Nov 26 '19 at 16:40
  • Im heading out shortly but if this is any help, this is how the cards are generated, not sure if this is causing any bugs, as the onMouseLeave is firing when i move it to another element, just not when it leaves the actual card. ` function CardView() { const games = gamesList return ( games.map((game) => { return ( ) }) ) } ` – cillsley Nov 26 '19 at 16:46

1 Answers1

2

Managed to fix this by applying pointer-events: none to all of the child elements.

cillsley
  • 37
  • 8