Color Hover

Interactions

Change the background color on hover.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

In this example, we created a page that changes background color according to a visitor’s hover movements over a menu.

 

We added 7 buttons, each displaying the text of a different color (plus one called “succulents” just for fun). As a visitor hovers over a button, the page background changes to the button’s color (or to an image of succulent plants). Moving the mouse away from the buttons displays the default light gray page background.

How We Built It

To create this colorful example, we added buttons, column strips, and some simple code.

Page Elements

We added the following page elements:

  • Seven buttons displaying the text of each color. The buttons are named button1, button2, etc.

  • Seven column strips, each with a different colored background. The strips are named columnStrip1, columnStrip2, etc., and are defined as hidden on load in the Properties panel.

 

Each button and column strip with the same number share the same color. So for example, button1’s text states “Blue” and columnStrip1’s background color is blue.

Code

  1. Define variables: We defined a global fade effect value for each time we show or hide an element. We also defined variables that represent all buttons on the page and all column strips on the page. We did this by selecting the elements by type.

  2. Change background on hover: We added a loop to set up what happens when a visitor hovers over one of the buttons. Hovering over a button triggers an event handler, showing the column strip with the corresponding colored background.
    Note that we used template literals to generate each button and columnstrip name using the “i” from the for loop.

  3. Revert background: When a visitor moves their mouse away from all the buttons, all column strips are hidden, displaying the light gray page background again.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

onMouseIn & onMouseOut

Hide & Show

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode