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);

})
});