---
title: "How to Change Style on Hover"
---

# How to Change Style on Hover

> Element states provide an opportunity to change the styling on a component when a user simply hovers the mouse cursor over a component. In this guide, we will create a Style Class with a hover Element State that changes the background color of a component using this Style Class.

1. Create a new style class, or edit an existing one. In this example, we will create a new style class called **HoverLabel**.
1. Under Style Rules, click on the **Add** ![](how-to-change-style-on-hover/add-icon.png) icon and select **Element State**.

    ![](how-to-change-style-on-hover/1-2019-04-18_15-42-18.png)

1. On the Element State dropdown, scroll down and select **hover**.
1. Click on the **Expand** ![](how-to-change-style-on-hover/expand-icon.png) icon next to Background to see the Background settings.
1. In the **background color** field, enter a color code or click on the color wheel to select a background color. We chose **#8AFFFF**, a light blue.

    ![](how-to-change-style-on-hover/2-2020-06-29_16-36-59.png)

1. Click **OK** to finish configuring the Style Class.
1. Next, apply the the Style Class to a perspective component. In this example, we will use a Label component.

    ![](how-to-change-style-on-hover/3-2019-04-18_15-37-36.png)

1. Put the designer in preview mode, or launch a session. While hovering over the label, you will see that the background color of the component will change while the mouse cursor is hovering over the component.

    ![](how-to-change-style-on-hover/4-2019-04-19_9-26-19.png)