Let me explain the issue at hand.
Currently, I have a layout like this:
-----------------
| ------ |
| |div1| |
| ------ |
|div2 |
|---------------|
In this setup, there is div1 placed within div2. Additionally, there is a transparent background overlay that darkens based on certain conditions.
When I hover over div1, the background of the entire page (including div2) turns black while leaving div1 unaffected. (I have successfully implemented this)
As I move out of div1 but still within div2, I want the black background to fade away. (This part also works properly unless the following step is applied).
However, when I exit div2 entirely, I would like the background to instantly disappear without completing the fade-out process.
The issue arises when entering div1 triggers a mouseleave event for div2 prematurely.
This means that the transition inside div2 is skipped, and the background goes from faded to invisible immediately when exiting div1.