How do I set a buttons state to hover colour when a page loads?

I have a multi state list which changes when a button (red word) is selected on the left > this changes the words on the right.
When the page loads it automatically loads STRATEGY and the list; how can I code the button strategy to appear as white when page loads? The button changes to white on hover when you start using the list.

This is the current code:
// API Reference: Introduction - Velo API Reference - Wix.com
// β€œHello, World!” Example: Velo Learning Center
$w . onReady ( function () {
$w ( β€œ#button8” ). onClick (() => {
$w ( β€˜#statebox8’ ). changeState ( β€œState1” );
} );
$w ( β€œ#button7” ). onClick (() => {
$w ( β€˜#statebox8’ ). changeState ( β€œState2” );
} );
$w ( β€œ#digitalbutt” ). onClick (() => {
$w ( β€˜#statebox8’ ). changeState ( β€œState3” );
} );
$w ( β€œ#customerbutton” ). onClick (() => {
$w ( β€˜#statebox8’ ). changeState ( β€œState4” );
} );
});

$w("#myElement").style.color="rgba(255,0,0,0.8)";
$w("#myElement").style.color="rgb(255,0,0)";
$w("#myElement").style.color="white";

In your case:

  1. First rename all your BUTTON-IDs and do it the right way…
  • btnStrategy

  • btnMarketing

  • btnDigital

  • btnCustomer

β€”> β€œbtn” ← stands for β†’ BUTTON

$w.onReady(function () {
    $w("#btnStrategy").onClick(() => {
        $w("#btnStrategy").style.color="white";
        $w('#statebox8').changeState("State1");
    });
    $w("#btnMarketing").onClick(() => {
        $w("#btnMarketing").style.color="white";
        $w('#statebox8').changeState("State2");
    });
        $w("#btnDigital").onClick(() => {
            $w("#btnDigital").style.color="white";
        $w('#statebox8').changeState("State3");
    });
    $w("#btnCustomer").onClick(() => {
        $w("#btnCustomer").style.color="white";
        $w('#statebox8').changeState("State4");
    });
});

Thank you for your help. Much appreciated! I will give this a try.

@info64604
Take your time :wink:
Surely some feedback would be useful for other users.
And like always β†’ do not forget to like it, if you really liked it.

@russian-dima thank you for your help.
I wanted the buttons to still hover on white / off red. When the page loads, STRATEGY loads in white but once another button is selected it flicks back to red. Is this possible?

@info64604
Everything is possible!

This is all about β†’ LOGIC ←

So, what excacly has to be happen, to achieve your desired function?
You have for example β†’ 3x-Buttons.
All of them are for example β†’ RED.
You click on one of the buttons to change clicked-button’s color and the button does it.
Now you click onto a second one and also changes the color of it for example to β†’ blue!

Ok! Right now you have 2-buttons which have now the color β†’ blue!
But normaly you wanted to change the color of the previous selected color back to red, right? β†’ YES, RIGHT ! :grin:

But nowhere inside your current working code, this functionality is written down (coded).

That means you will have to expand your code.

My suggestion would be:

  1. First to set ALL-BUTTONS back to β†’ ORIGINAL-COLOR
  2. Then mark one of the buttons with another color.

And everytime you select another button β†’ first a β†’ RESET_COLOR-functions runs and sets all BUTTONS to their β†’ ORIGINAL-COLOR.
And in second step the color of the current selected-button changes to β†’ blue.

This way, you always will have ONLY-1-BUTTON which will have a different color, compared with all buttons.

Now its on you!
Code your β†’ resetButtonColors() - function

function resetButtonColors() {
	...here the code for this function...
}
1 Like

@russian-dima thank you for your help. I will give it a go. :slight_smile:

1 Like

@russian-dima
This is the code that I ended up using with a little help from a friend as I am a complete novice with code :slight_smile: which I think is what were saying above. Thank you for your help.
function resetButtons ( ) {
$w ( β€œ#btnStrategy” ). style . color = β€œ#CC192A” ;
$w ( β€œ#btnMarketing” ). style . color = β€œ#CC192A” ;
$w ( β€œ#btnDigital” ). style . color = β€œ#CC192A” ;
$w ( β€œ#btnCustomer” ). style . color = β€œ#CC192A” ;
}
$w . onReady ( function restButtonColors () {
$w ( β€œ#btnStrategy” ). style . color = β€œwhite” ;
$w ( β€œ#btnStrategy” ). onClick (() => {
resetButtons ();
$w ( β€œ#btnStrategy” ). style . color = β€œwhite” ;
$w ( β€˜#statebox8’ ). changeState ( β€œState1” );
});
$w ( β€œ#btnMarketing” ). onClick (() => {
resetButtons ();
$w ( β€œ#btnMarketing” ). style . color = β€œwhite” ;
$w ( β€˜#statebox8’ ). changeState ( β€œState2” );
});
$w ( β€œ#btnDigital” ). onClick (() => {
resetButtons ();
$w ( β€œ#btnDigital” ). style . color = β€œwhite” ;
$w ( β€˜#statebox8’ ). changeState ( β€œState3” );
});
$w ( β€œ#btnCustomer” ). onClick (() => {
resetButtons ();
$w ( β€œ#btnCustomer” ). style . color = β€œwhite” ;
$w ( β€˜#statebox8’ ). changeState ( β€œState4” );
});
});

1 Like

@info64604
The most important thing is β†’ that it works for you.
Good luck with your project/site.