Mouseover Effects


#1

I have a rectangle and want to have the fill colour change on mouseover. So I’ve selected the rectangle, selected Mouseover style effect and chosen the fill.

This doesn’t work though. I have to click on the rectangle to change the fill colour and click outside the rectangle to change it back to the default colour.

Am I doing something wrong?


#2

Probably. This is a straightforward feature in Axure. In the editor, select a widget, click “New Interaction” in the INTERACTIONS panel, then click “:mouseover” under “STYLE EFFECTS” at the bottom of the list. Looks like you’ve done that. If it doesn’t work, what other interactions do you have for that widget, group, dynamic panel, etc? Check if there are any widgets in front of your rectangle which might be blocking it. In most browsers, you can Inspect the widget (right-click it in the browser and choose Inspect) --then, when you hover over it, the HTML should change to include “mouseover” in the "div class= " section. If not, something is blocking it.

Here is a quick demo of the :mouseover style to show how it should work for you.
mouseover effect.rp (48.7 KB)

If you still have issues or questions, I recommend uploading your file so forum users can look at it and apply fixes. (Look for the little up-arrow icon in the Reply window control menu, just to left of bullet-list icon.)


#3

Thanks for that. Interestingly, your file does the same. I have to click on it to change the fill colour and click anywhere outside to change it back. This is on Chrome on a Mac. I just tried in FF and Safari and it works fine. Don’t know if that’s a bug in Chrome or a bug in Axure. I tried in AX8 as well and get the same.


#4

Well that’s weird. After previewing in in FF and Safari, I went back to Chrome and still had the preview open from before. It’s now just decided it’s going to work. I didn’t refresh the screen or anything.


#5

Huh. Maybe try clearing your cache in Chrome. If it still happens, submit a bug report to support@axure.com


#6

It did it again a little while later. I opened FF to check and it worked. Went back to Chrome and it works. I suspect it’s my laptop. This is a work one so next time it happens I’ll fire up my personal one and see if it does the same.