Brighten background on hover

[iaminapickle]

Hi friends. I think I'm just missing something obvious here. I'm trying to brighten the background color on hover but I can't seem to figure out how to either use callbacks in states or avoid a background binding loop.

export component Foo {
    Rectangle {
        background: black;
        ta:= TouchArea {}

        states [
           active when ta.has-hover: {
                // Can't use callbacks here 
                // background.brighter(0.2);

                // Background is part of a binding loop here
                // background: self.background.brighter(0.2);
           } 
        ]
    }
}

Thanks in advance :)

[Vadoola]

Perhaps use an intermediary property?

Like this

[burumdev]

You can also use a filter background on top of the background. An RGBA color that darkens the background by default, but when hovered becomes invisible to reveal the bright background. You can also animate the transition:

Built on top of Vadoola's example