Hotspot for mouseover styles and radio selection

page-and-widget-styles
#1

Hi forum, I have the following dropdown where I am trying to apply mouse over styles and radio selections.

17

Challenge 1:
I would like to apply hover states to each radio+background rectangle. I have tried applying mouse enter events on the hotspot above the selection but this doesn’t seem to work as I can not search for the radio widget.

Challenge 2:
I would also like that the hotspot sets selected/checked to true whichever radio option is being clicked on. Same here, I can not search of the radio widgets and I can not figure out why.

Attaching the file for any help
Filters_Dropdown.rp (65.1 KB)

#2

Unfortunately, you can’t use an action on one widget to fire the mouse over effect of another, even if you fire the widget’s “OnMouseEnter” event. It will just call the logic, not the styling.

The good news is you can still accomplish the effect you want without the need for the hotspots. Just group the radio button and its background rectangle together and enable the “Fire Mouse Style Effects” option in the groups properties.

image
image.png744×267 29.4 KB

Filters_Dropdown.rp (61.9 KB)

#3

Unfortunately I will have hotspots over the selectors anyway to select/unselect radio buttons or checkboxes, so there will still not be the opportunity to apply the grouped style.

Apart from that I wanted to avoid the group style as I will need to replicate this behaviour for a whole list of filters also and wanted to see if there is a workaround to applying interaction styles when there is a hotspot over an element. So if I understood correctly it’s not possible at all to have interaction styles if there is a hotspot over an element?

#4

Kind of. In the HTML code that’s generated, a hotspot is just a transparent element sitting “above” another. The mouse cursor can detect the bounds of the hotspot but the ones underneath are hidden.

You can include the hotspot as part of the group and still use the trigger style effects option but that’s about as far as it will go. However, if you create a group, you can move the logic that’s on the hotspot to the group so clicking the group would set the radio button/check box; the hotspot would not be necessary.

I’m not sure I understand your problem. You should be able to use the group trigger for as many list items as you want.

#5

Wait! I’m an idiot…well, half of one anyway.

The hotspot not triggering style effects is still true, but I know why you couldn’t find the radio buttons. The widget filter was set to show only those that have names:
image

Your radio buttons weren’t named so they didn’t show up. You can either turn off that filter or add names to all the things you want to interact with.

I noticed this when I was working on your example.
Filters_Dropdown.rp (64.4 KB)

#6

I didn’t even notice I activated that, I must have done it by mistake :sweat_smile:
Thanks for catching it, I was going crazy for a while with that, attempting to quit/restart axure, recreate the file or saving it as a new file.

The reason I wanted the hotspot was to avoid adding/removing filters on the code of a radio/checkbox. I suppose a group option could be a viable alternative, if I move all that to the group instead.

#7

good information thanks for sharing
vmware

closed #8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.