Mouse-hover effect to change colour of icons

Process & Techniques
#1

Hello there,

I would like to highlight the icons in my current design whenver a mouse hover takes place.

Any help please?

#2

Welcome,

I might not fully understand your question so here are multiple questions/answers.

Design-wise: What design tool are you using? I would just test it in Codepen.

If it’s code-wise: Do you have a link or CodePen which you can share with us? If you’re using FontAwesome icons or SVG images you could just change the color on hover, don’t forget to add a transition.

Inspiration: https://codepen.io/kjbrum/full/wBBLXx

3 Likes
#3

Theank you sandervolbeda for your reply.

I am using Adobe XD for making mockups. Problem is mouse hover functionality does not work in Adobe XD. Is there any plugins or alternative solution?

1 Like
#4

Currently there is no such functionality and/or plugin for Adobe xD which I’m aware of.

Please upvote the functionality request at the Adobe forum.

1 Like
#5

Thank You.

#6

Unfortunately, there’s no built-in hover effect in XD. You’ve got 3 options:

1. Click between artboards

Create a second artboard with the hover effect on it and then add a hidden button that switches between the artboards when you click on it. Like this:

xd-rollover
xd-rollover892×873 19.5 KB

2. Show an example hover as a static element in your design

Add the colour change and a graphic of a pointer to show it’s a hover state. Like this:

XD%20rollover%202

3. Import your XD designs into another prototyping tool such as Axure that supports hover states

2 Likes
#7

thank you for your suggestion. I could not grasp the second example suggested by you. Could you please elaborate it a bit?

#8

Here’s the XD file:

You add an image of a pointer to your design and then change the text colour to show how the rollover will work. It’s not interactive but demonstrates to a viewer how the colour will change.

1 Like