Introduction To Wix (Velo) Hover Effects Code

Creating an engaging and interactive website is crucial to capturing the attention of visitors. One effective way to achieve this is by incorporating hover effects into your web design. When a user hovers their mouse over an element, it can trigger various animations, revealing additional information or providing visual feedback. In this blog post, we'll explore how to implement hover effects using Wix Velo Code, a powerful tool that allows you to extend the functionality of your Wix website.

Understanding the Wix (Velo) Hover Effects Code

Let's take a closer look at the JavaScript code provided:

```javascript

$w.onReady(function () {

    // Write your JavaScript here

    // To select an element by ID use: $w('#elementID')

    // Click 'Preview' to run your code

});

export function box1_onMouseIn(event) {

    $w('#box7').show();

    $w('#hovertext1').show();

    $w('#text135').show();

    $w("#box7").style.backgroundColor = "rgb(255, 192, 58)";

}

export function box1_onMouseOut(event) {

    $w('#box7').hide();

    $w('#hovertext1').hide();

    $w('#text135').hide();

}

//box2

export function box2_onMouseIn(event) {

    $w('#box7').show();

    $w('#text111').show();

    $w("#box7").style.backgroundColor = "rgb(25, 25, 25)";

}

export function box2_onMouseOut(event) {

    $w('#box7').hide();

    $w('#text111').hide();

    console.log($w("#box1").style.backgroundColor);

}

```

How to code Wix (Velo) Hover Effects

1. The code starts with the `$w.onReady` function, which ensures that all elements on the page are fully loaded before executing any code.

2. The code defines four functions: `box1_onMouseIn`, `box1_onMouseOut`, `box2_onMouseIn`, and `box2_onMouseOut`. These functions are triggered when the mouse cursor hovers over or leaves specific elements (box1 and box2) on the webpage.

3. When the mouse hovers over `box1`, the `box1_onMouseIn` function is called. It does the following:

- Shows the element with the ID `box7`.

- Shows the element with the ID `hovertext1`.

- Shows the element with the ID `text135`.

- Changes the background color of the element with the ID `box7` to "rgb(255, 192, 58)".

4. When the mouse leaves `box1`, the `box1_onMouseOut` function is called. It does the following:

- Hides the element with the ID `box7`.

- Hides the element with the ID `hovertext1`.

- Hides the element with the ID `text135`.

5. Similarly, when the mouse hovers over `box2`, the `box2_onMouseIn` function is called. It does the following:

- Shows the element with the ID `box7`.

- Shows the element with the ID `text111`.

- Changes the background color of the element with the ID `box7` to "rgb(25, 25, 25)".

6. When the mouse leaves `box2`, the `box2_onMouseOut` function is called. It does the following:

- Hides the element with the ID `box7`.

- Hides the element with the ID `text111`.

- Logs the background color of the element with the ID `box1` to the console.

Implementing Hover Effects on Your Wix Website

To implement the hover effects on your Wix website, follow these steps:

1. Open your Wix website in the Editor.

2. Click on the "Code" icon in the left-hand side menu to access the "Developer Tools."

3. In the "Developer Tools" panel, click on the "Page Code" tab.

4. Copy and paste the provided JavaScript code into the "Page Code" editor.

5. Save your changes and click "Preview" to see the hover effects in action.

6. To customize the hover effects, you can modify the elements' IDs and their corresponding actions in the JavaScript code.

Friendly Conclusion

Hover effects are a fantastic way to add interactivity and enhance the user experience on your website. With the power of Wix Velo Code, you can easily implement these effects and make your website stand out. Experiment with different animations, colors, and elements to create a visually appealing and engaging website that keeps your visitors coming back for more. Happy coding!