Skip to main content
Question

Dropdown menu mouse enter/leave or hover interaction

  • April 19, 2024
  • 3 replies
  • 446 views

Hello community, I have one specific question.

How can I build interactive dropdown menu, on mouse enter and leave interaction?
I am only interested about interaction, since my interaction doesnt work good.

When I enter element with mouse that shoud pops out dropdown it is working. when I go down with cursor towards to dropdown it is working, when I go out from dropdown it is working, BUT when I go BACK UP toward element that holds dropdown, dropdown simply flick once but when I move away with curson dropdown won’t close. It only closes as I mention earlier.

I would attach video for better understanding but I am new member so it doesn’t let me to do it.

Please can somebody help me with that?

I would be more than appreciated.

3 replies

Vishal_Ramawat

I tried creating a quick dropdown:
On Mouse enter on I change to open flyout state


On Mouse leave I revert to original state

It is behaving as it should, but not clear on how you have implemented it. Screenshots might be helpful.


  • Author
  • 2 replies
  • April 21, 2024

@Vishal_Ramawat thank you, I figured it by the time. I am not sure if you have that red frame in absolut possition or no - but I did it with absolut possition and it is working perfectly… Also INSTANT trigger fix that problem with flickering. But now I have another problem. When I use that component in my layout and dropdown show up, it shows up covered by “following element” even though “following element” is beneath menu element on layers panel… 🤔 and I really cannot figure out why.


  • Author
  • 2 replies
  • April 21, 2024

Okay I just found the answer. Canvas stacking set “first on top” of parent element which is located in AUTO-LAYOUT panel is the right answer.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings