How can I delete a hover state's styles in Webflow that I added by mistake?

To delete a hover state's styles in Webflow that you added by mistake, you can follow these steps:

1. Select the element: Open the Designer panel and select the element that you want to remove the hover state from. You can do this by clicking on the element in the canvas or selecting it from the Navigator panel.

2. Open the States panel: In the Designer panel, click on the "States" tab located on the right-hand side. This will open the panel where you can manage different states for the selected element.

3. Delete the hover state: In the States panel, you will see a list of states associated with the selected element, including the hover state. Click on the hover state to open its styles.

4. Reset or remove styles: In the hover state styles panel, you have a few options to delete the styles. First, you can simply reset the styles to their default values by clicking on the "Reset to default" button, which looks like a circular arrow. This will remove any custom styles applied to the hover state and revert it back to the default state.

Alternatively, if you only want to delete specific styles, you can click on the "X" icon next to each style property to remove it. This will only delete that particular style while keeping other styles intact.

5. Confirm changes: After making the necessary changes, click outside of the States panel to close it and apply the changes to the element. You will then see that the hover state's styles have been deleted.

Remember, if you have multiple elements with the same class name, deleting the hover state from one element will affect all instances of that class. If you only want to remove the hover state from a specific instance, consider giving it a unique class or using combo classes to target it specifically.