How to implement an increase in the element (s), when the cursor approaches?

Question

css

It is necessary to increase (not hover) in the vicinity of the cursor.

Answer 1

If anyone is interested in how I implemented it:
1 - I hang the ref and write the coordinates to the global state in the center of the element (the components know where they are located along the x, y axes)
2 - I throw the mouse coordinates relative to the parent with props (now the components know where the cursor is);
3 - Set the size of the maximum increase and the minimum distance for triggering.
4 - I increase the size as a percentage, from the distance (for example, the maximum increase in W and H is 50px,
the trigger distance is 80 - this is 0%, and in the center it is 100%)
something like this

Answer 2

It’s not entirely clear why the hover didn’t work, but you can use mouse hover events .