Why the hover is not working?

[HighPingNiklas]

Hey, in Adobe XD my hover is working but not in web, why?

[webmaker]

Hi,

There could be several reasons for hover not working. You must wire up the hover that you want. Check out this guide:

Applying Hover Effects with Hover Effects option in Web Export video

Applying Hover Effects with Hover Effects option in Web Export This is not how you have to setup hover effects but it is one way.

Let me know if this helps

[webmaker]

You can also use a new method to create powerful hover effects:

New method to create web HTML buttons

There are now more direct options for creating buttons in Web Export. Basically, you do the following: create the visuals for the button states of both normal and hover group them together on top of each other open the macros list and run the macro “Show hover state as second item in group” This macro adds the CSS to the group that shows a hover state. Test it by exporting and moving the mouse over the buttons. For adding an active or mouse down state use the, “Show hover and active state i…

[Astrozzi]

I did this method, but how would I do this and have it animate or transition smoothly between the two visuals?

[webmaker]

If there is animation you would probably have to do the first method.

The first method writes the CSS hover styles. This different styles are applied when you hover over the layer.

The second method hides the original layer completely and shows the hover layer. So if you have animation it will probably be lost.

Can you post an example or a XD artboard?

You probably want to use the first method to create the hover CSS or write the hover CSS manually.