MouseLeave mouseout When the suspension box should not disappear when the CSS solution

The effects and code ideas to achieve

In simple terms, a div wrapped with a horn and a hover box hover event is written on this div when the mouse hovers over the DIV and the hover box appears.

The bottom box will not disappear when the mouse is moved from the small speaker to the bottom of the box.

Problems encountered

The problem is that when the mouse moves from the speaker to the top of the hover box, the hover box will disappear when the mouse is moved to the space in the triangle.

Solution Some people say mouseleave time with a timeout to judge, if moved to the bottom of the suspension box (to determine whether to move to the suspended box, to the Suspended box write mouseentered event), the hidden logic stopped on the line, I tried, it is not easy to use

Why the problem occurred

Think carefully, in fact, with a simple CSS can be solved. The problem with the above is that there is a gap between the horn and the suspension frame, so when the mouse moves to the space, it is the same as the focus shifted the div with the horn and the hover box.

Solutions

We just set a div outside the hover box (this div's CSS style is write-only position does not write the background color), this div will be the same as the horn, so that the div and the speaker there is no gap between the mouse hover over the horn, let this div appear, Naturally this div wrapped in a background-colored suspension box will also appear. As long as there is no gap between this div and the speaker, the mouse moves from the horn to the bottom of the suspension box, it will not touch the gap, so the suspension box will not disappear.