Problem with hovering over outside of element
Hi.
It's a simple menu bar. When you hover over each one of left side links in the orange area, the related panel will open in right side of each one, and the hovered link will have a white background with black text color.
There's a cool thing when you move your mouse from right panel to the red area (I marked in the attached image), the left side panel still has hover style, by mean, the white background and black text.
But I couldn't implementation this cool thing, when I move cursor to the red area, the hover style will disappear.
How can I achieve that?
Thank you in advance
![No description](https://cdn.answeroverflow.com/1147489931862736957/Screenshot_2023-09-02_142905.jpg)
6 Replies
i hv an idea regarding how it cud be done but ill need to see ur code
u cn share in a codepen
No, unfortunately
Because I wrote it on my machine locally with React, and I didn't upload it on the GitHub 😩
If I could upload it, I would show it to you ðŸ˜
If it help, I saw this menu from here
https://woodmart.xtemos.com/demo-retail/demo/retail/
WoodMart
Demo Retail - WoodMart
I inspect it and realized they used of pointerEvent if I didn't mistake
you can copy/paste the code from the inspector, just copy innerhtml on the body tag and then your CSS from the styles tab and paste it into codepen, you'll get 99% of the way there and just have to tweak any images if they're relevant to point to something like https://picsum.photos
Ohom!! not a bad idea! I'll try
Thank you