# Mouse enter and leave events are erratic?

**URL:** <https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091>\
**Category:** Ask the community\
**Created:** [May 23, 2023, 9:26am UTC](https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091 "2023-05-23T09:26:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nicolas\_Leboeuf](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/nicolas_leboeuf/32/465_2.png) [@Nicolas\_Leboeuf](https://community.penpot.app/u/Nicolas_Leboeuf)\
**Post date:** [May 23, 2023, 9:26am UTC](https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091/1 "2023-05-23T09:26:47Z")

</div>

Hi all,

I have an issue with the mouse enter & leave events.

Have a look to the video [here](https://nextcloud.leboeuf.me/index.php/s/aToYyDZERWp8Bpr)

The dropdown is a flex layout as you can see here

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a230fcbca459aac2ba7300cc3e3a95d1d21ede88.png)

On every board, there is an event “mouse enter” on each button to open the related board, and an event “mouse leave” to close it.

Maybe I do it very wrong? Or the performances are really bad?

---

<div class="post-metadata">

**Author:** ![jdittrich](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/jdittrich/32/100_2.png) [@jdittrich](https://community.penpot.app/u/jdittrich)\
**Post date:** [May 23, 2023, 4:54pm UTC](https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091/2 "2023-05-23T16:54:28Z")

</div>

Hard to say… My intuition would suggest that it would be better to have the single menu entries handle their hover. But I can not say that your approach is wrong, in a minimal example it does not show problems for me:  
 ![grafik](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/bdceaf4906547b06ffa7e3af040c2c8367bc3b19.png)

---

<div class="post-metadata">

**Author:** ![jdittrich](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/jdittrich/32/100_2.png) [@jdittrich](https://community.penpot.app/u/jdittrich)\
**Post date:** [May 23, 2023, 5:06pm UTC](https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091/3 "2023-05-23T17:06:59Z")

</div>

But building on that… going back to a non-hover state is where my replication started to have problems:

- One could try to register a mouseover on the menu background (the non-menu-item) to move to a board without any hover effect, but that leads to the question whether background or the overlaying element captures the mouse event.
- One could register a mouseout on the single menu items, this would move to to a board without any hover effect but that leads to the question which event “wins” when the mouse moves out of one menu item and to a new item. If the hover/mouseenter wins it will move to a board with hover effect; if the mouseout wins its moving to a board without hover effect.

Both these are defined in the DOM/JS standard for browsers but not for Penpot (needing to know these would make use cumbersome anyway)

Either way, thus it is probably best to have sub-components for single menu items that react to a mouseover/mouseout by themselves.

---

<div class="post-metadata">

**Author:** ![Nicolas\_Leboeuf](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/nicolas_leboeuf/32/465_2.png) [@Nicolas\_Leboeuf](https://community.penpot.app/u/Nicolas_Leboeuf)\
**Post date:** [May 24, 2023, 7:45am UTC](https://community.penpot.app/t/mouse-enter-and-leave-events-are-erratic/3091/4 "2023-05-24T07:45:30Z")

</div>

> Either way, thus it is probably best to have sub-components for single menu items that react to a mouseover/mouseout by themselves.

I think that’s planned, but until it’s released…

I’d say you’re right, there are issues to catch the event between all the concerned boards.