Right way to implement addEventListener with context and react

[amapic]

I went to this page of documentation : https://greensock.com/docs/v3/GSAP/gsap.context() to try to implement this but I can't make it works. For me, there's not enough details actually on this page but it must rather be a problem of well understanding of react useRef/useEffect and document.querySelector.

 

I put my code here and I must be very close to make it works find : 

 

https://codesandbox.io/p/sandbox/falling-river-ygqcdo

 

I simply just want to change the border color of an element when it is hovered.

 

How to do ?

 

See the Pen by (@) on CodePen

[amapic]

the solution might be here actually : https://codesandbox.io/s/cold-http-40fl1?file=/src/App.js comong from here :

 

[Cassie]

Hi there!

 

You had pointer-events:none in the CSS on the element you were trying to hover, so it wasn't registering any interactions.

You were also using a click handler instead of mouseenter so you were listening for a 'click' instead of 'hover'

There were a few stray bits and bobs in there too, a useEffect count and some state which you weren't using.

Here you go! Hope it helps.

https://codesandbox.io/p/sandbox/cocky-bhabha-0dih48?file=%2Fpages%2Findex.jsx&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A14%2C"startColumn"%3A1%2C"startLineNumber"%3A14}]