I have a page like this click to see

First, the technical stack I use: Vue@2.6.11, element-ui@2.14.1

The functions that need to be implemented is:

when I have a popover named 'A', and there are some 'li' tag in it, I set it's trigger mode to hover

and if one the this 'li' has sub options,when I hover over this 'li', like button5 in this case. Then the nesting popover named 'B' will appear on the left.

But, at the moment, when my mouse leave the nesting popover named 'B', 'A' disappear, it is not what I expected ;It gives me a headache

I try to search plan by Google, but I can't find. How could I resolve this problem.Thanks

The code address is here: https://codesandbox.io/s/vue-jsx-dml6s?file=/App.vue