Wix Tutorial - Change Background Color on Hover with Wix Code
The background color changes according to visitors’ hover movements over a menu.
6 buttons have been added which each display the text of a different color. As a site visitor hovers over a button, the page background changes to the button’s color. Moving the mouse away from the buttons displays the default darg gray page background.
Elements:
Text Elements:
-
Blue: #button1
-
Yellow: #button2
-
Red: #button3
-
Green: #button4
-
Pink: #button5
-
Orange: #button6
Wix Code:
let fadeOptions = {
"duration": 200
};
$w.onReady(function () {
let allOfTheButtons = $w("Button")
let allOfTheStrips = $w("ColumnStrip")
for (let i = 1; i < 8; i++) {
$w(`#button${i}`).onMouseIn((event) => {
$w(`#columnStrip${i}`).show("fade", fadeOptions);
})
}
allOfTheButtons.onMouseOut((event) => {
allOfTheStrips.hide("fade", fadeOptions);
})
});
Demo:
