How do I click on a widget below a widget?

Sorry for the beginner question.
I’m trying to make a visual widget that changes color when the mouse hovers over it, but if I place this widget over a button, the button becomes unclickable. Also if i disable hit testing for a widget, the button will still be clickable, but the widget will not be able to detect the mouse.
How can I make the bottom button clickable while overlapping the top widget?

I’d recommend one of two approaches:

  1. Nest the color-changing widget inside the button
  2. Disable hit testing for the widget like you’ve already done, and then have the button hover event tell the color changing widget to do its thing.

It seems complicated. Can’t these two be done independently? I want to use this widget in various places other than as a button.

It seems complicated.

Nesting the widget inside a button is about as simple as it gets. You can do that on a per-instance basis or create a button class that’s reusable. In either case, the color-changing widget is still its own thing that can be used in and out of buttons.

I’d argue that ensuring the widget is always placed on top of the button is going to be more work in the long run anyway.

I searched diligently and found this. And this worked!
However, it seems that you need to use override functions for everything you use to make this work.