Combining mouse enter/exit and mouse click not working

#1

Hi,
I’m new to axure and I’m trying to create a “select colour” section (on a product page) in Axure and I’m having trouble combining the “mouse enter/exit” function with the “on click” function. This is what I want to achieve:

axure
axure.png1038×430 14.4 KB

The problem is that once the colour has been clicked on, it doesnt stay selected. if I move the cursor away from the colour, it’s deselected. I assume that it is activating the mouse exit function.
Is there an easy way to achieve what I want? I understand what’s going wrong but I just don’t know how to do it right. I’m currently using dynamic panels.
I really appreciate the help,
Malin
choose colour.rp (53.4 KB)

#2

I wouldn’t use dynamic panels in this case.
For the change in the border of the circle, I would use the style effects. You can select for “hover” and for “selected” different styles, in this case different border thickness and color.
For showing the label, I added interaction on the circle -
on mouse enter - show the label.
On click - Select the circle (this will give the style of “selected”).
On selected - show the label.
(other option is to show the label on click. I like to be specific).
For mouse exit - hide the label only if the circle is not selected.

choose colour2.rp (45.1 KB)

#3

Amazing! Thank you so much for your help. It’s much easier to understand when someone describes/translates the different cases/interactions to normal language. I understand the selected function much better now.
Thank you!