Prevent flickering when hovering over row

Hi all, I’ve created an example of multiple cells within a row in the attached RP file. A hotspot rests on top of the widgets to trigger the hover styling for the entire row (via the widgets’ selected style). When the user hovers over the row, I’d like for the edit icon to appear so that he can interact with it. How do I prevent the flickering when hovering over the icon?

I feel like this is a simple thing but I can’t wrap my head around how to do this without building something elaborate.

hovertest.rp (54.9 KB)


You have the hotspot set to bring the pencil to front. This puts the pencil OVER the hotspot thus creating a dead area. This is what is creating the flicker. Kill Bring To Front and you should be set.

Thanks j, I did that so that I can make the pencil interactive. For example, allow the user to click on it.

OOOooooh! Gotcha. Maybe copy and paste the hotspot conditions onto the pencil so it also acts like a hotspot?

Yeah, I tried that too but it just keeps flickering. I imagine it’s just trying to keep up with all the actions.

Try putting the interaction on a group. Sample attached…

hovertest.rp (49.4 KB)

1 Like

That’s it! Works out perfectly.

I am having the same issue, only I can’t seem to fix it. My axure file is a mess, I’m sure it could be set up much better, but this flickering/vanishing thing has got me stumped. Can anyone help?I have only tried to do the first hover on traffic to views. I want to be able to click on the icons to ‘edit’ or ‘delete’ but right now the flickering and stuff is terrible. I’m sure it’s something really easy and I’ve just forgotten what it is that’s doing it. TSM_Dashboard.rp (1.2 MB)

Hi!

You can get the behavior you want without any OnMouseEnter/OnMouseOut code.

There’s a convenient group/dynamic panel property called “Trigger Mouse Interaction Styles.” When this is set for a group/panel, every member of the group will trigger its mouse-over interaction style when the group/panel is moused over.

The trick here is, instead of hiding the pencil and the “x,” you set their opacity to 0, and in their mouse-over interaction styles, you set the opacity to 100. So once “Trigger Mouse Interaction Styles” of the group/panel is true, that mouse-over style will take effect.

I took one of your nav items and put it in its own file, with the properties above. I’ll add it below.

That said, you can continue using your method if you fix some issues. Looking at “Traffic to Views” -

  • You have an additional set of MouseEnter/MouseOut interactions defined for the rectangle in addition for the one assigned to the group. Get rid of the ones assigned to the rectangle.

  • When you show the pencil and the “x,” don’t use “Treat as Flyout”

  • The hide command (on the group’s OnMouseOut interaction) refers to the wrong pencil and “x” (i.e., they’re not the ones that are in the group).

Here’s the file showing how to do this with Interaction Styles alone:
mouse_over_group.rp (46.1 KB)