Changing colour of one widget with hovering over another


I’m quite new to Axure and wonder whether someone could help.
I would like to show how one set of elements or widgets (A-C) interacts with other elements on a page (D-H).
In order to do it I would like to change colour of (A) while hovering the mouse over it but also, at the same time, change colours of (D,F). And I would like the colours to revers when the mouse if off. Similarly, when the mouse hover over (B) the the colours of (B,E,H) changes at the same time and returns when the mouse is off (B). Could anyone help me with it? I only managed to do it with changing the opacity but not the colours and also the opacity was not coming back to original when mouse was off. Would really appreciate some help.


You can do this using the ‘Fire Event’ interaction. So, you would set up an ‘OnHover’ interaction on Widget A and add a ‘Fire Event - OnHover’ for the other widgets.

Alternatively, you can group them and tick the ‘Trigger mouse interaction styles’ option, so they will all fire together even if you are only hovering over one of the group.

Thank you for such a quick reply! What is the difference between Mouse Hover and mouseover Style effects? I don’t know how to change colour with a mouse hover event. I seem only to ba able to change it with mouseover

There are pre-defined interaction styles for mouseover, selected, disabled etc, which you can tweak for widgets or groups of widgets. These only affect visual styling.

The ‘Mouse Hover’, ‘Mouse Out’, ‘Mouse In’ etc interactions allow you to trigger anything. You can achieve visual styling changes using these, but you need to precisely define what to change when, whereas the interaction styles take care of most of that.

Thank you! I’m still very new to all this concepts, need to play with some examples. Is there any example of how to make mouseover colour change with Mouse Hover event? Also, couldn’t find a way to tweak the mouseover interaction. I’m quite novice in this space.

Actually, on playing about with it, it seems you can’t directly set most styles from a Mouse Hover - you need to use the :mouseover: interaction styles. You can trigger them using the ‘fire event’ method I mentioned above though. You can find details of that here.

1 Like

Hmm, but for the Fire Event :mouseover is not available :frowning:

I think you can use mouse hover to trigger them.

However, grouping the widgets and triggering using the tickbox method is a lot easier!

What do you mean by the tickbox method? Do you have an example, because I have a similar issue.

See the description of mouseover interaction styles here. You can group items together and have all of their mouseover styles fire if any widget in the group is moused over. This is useful for changing multiple different line colours/fills or for items spread around a page that you want to change if any of them are interacted with.