javascriptcssvue.js

mouseleave event fires late in vue.js


I have a simple sidebar designed in HTML and I have developed a script where the sidebar closes and opens when the mouse enters and mouse leaves respectively.

You can check out the DEMO here.

I have used Vue.js instance for the whole sidebar, everything works perfectly except when the mouse hovers any of the items in the side bar then when the mouse leaves, the closing of the side bar is very slow.


Solution

  • You should use mouseenter instead of mouseover ..

    <div id="custom-erp-id-side-nav" class="custom-erp-side-nav" @mouseenter="openSideBar" @mouseleave="closeSideBar">
    

    Codepen