Change Background Color on Hover | WixCreate | Wix Code - Corvid
 

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:

Official Wix Expert & Wix Agency Partner

© 2020 by WIXCreate.com

I  All Rights Reserved  I  info@wixcreate.com  I  202-640-5440

facebook-2.gif