Is there a way I could create a button (on any shape) that has a hover state that is not overridden by the button's face text (text) that overlaps it?
- I have a symbol with two shapes (button body) and (button text)
- On hovering over "button body", the desired animation plays...
- BUT, if the mouse reached the "button text" region, the animation is cancelled as the shape underneath "button body" loses focus.
- Essentially, the element "button text" must be visible but must be entirely inactive to mouse/touch events.
I have tried a few hacks for this but since the scene has many state changes, I would like to know if there's a real solution...
Add a third element to your button symbol, which is a transparent rectangle. Now add all your mouseover, mouseout and click events to the transparent rectangle.
Yes, that's the hack I've been using but was wondering if there was a cleaner way to achieve this. I currently have around 300+ nodes that act as individual buttons and am trying to optimise the scene as much as possible...
Thanks for your reply!