Sustained Button Hover Until Next Button Click- SOLVED

Ask the community
,
1

Is it possible to keep a button ‘highlighted’ [ie- hover colors enabled] when clicked, and ‘deactivated,’ or, returned back to regular button colors, when another button is clicked? The next button would do the same, etc.

I have a slideshow that changes slides when buttons are clicked. The buttons state the name of each slide, and I would like to keep them ‘highlighted’ when on the designated slide.

Many thanks for your suggestions.

2

If you want you can change the button color on click, using .style: https://www.wix.com/corvid/reference/$w.Button.html#style
Then you can change it back when the next button is clicked.

3

If you have many buttons, you can do something like this:

$w.onReady(function () {
    $w("Button").style.backgroundColor = "rgba(255,0,0,1)";
    $w("Button").onClick((event) => {
        $w("Button").style.backgroundColor = "rgba(255,0,0,1)";
        $w("#" + event.target.id).style.backgroundColor = "rgba(255,0,0,0.5)";
    })
});
4

@jonatandor35 Is there a way to make this work on only a selected group of buttons, instead of all the buttons on the page?

5

@danielwi yes.
You can do something like:

$w.onReady(function () {
 let buttonsToChange = [$w("#button1"), $w("#button2"), $w("#button3")];//put the relevant buttons here
    buttonsToChange.forEach(button => {
        button.style.backgroundColor = "rgba(255,0,0,1)";
        button.onClick((event) => {
            buttonsToChange.forEach(b => {
                b.style.backgroundColor = "rgba(255,0,0,1)";
            });
        button.style.backgroundColor = "rgba(255,0,0,0.5)";
    })
    })
})
6

@jonatandor35 Thanks a lot! it’s working now!

7

@danielwi you’re welcome :slight_smile:

8

Hi is there a way to use this not for a background color change but (regular, hover, and clicked) with one of the more image-based buttons? I am using this type of button as more of an interactive button for users.

Also, this is a second effect I would like to add but is it possible to code how many people click the button and display the counter like a notification count? I haven’t been able to find anything related to this in WIX code or Velo.

9

Hello!!

After this, how can I change the color on mouseIn and clicked? I would like it to have one color in its regulare state, another one if the mouse in on top and another color if It is clicked. If it is clicked, all the other buttons must be in their regular state.

10

This not only applies on the color of the button, but also the text color