Hover is slow / Hide & Show using onMouseEnter & onMouseOut

I have some Dynamic Panels, a repeater, all with a ‘simulated’ hover. The hover state displays several buttons and an editable form field.

See it at Home

The hide is working fine, but the show isn’t working if you mouse over quickly. It ends up that all of the hover states are on.

Does anyone have any idea on reducing the latency on the onMouseOut? Or, a better way to do this?




Hover.rp (225 KB)

1 Like

Hi Paul -

Use interaction styles instead of code for mouse over and mouse out effects. There’s a mouseover interaction style that you can apply to most objects.

For your example, you have a 2px green border as well as two icons that appear on mouseover and disappear on mouseout. (You won’t need the rectangle you are hiding and showing with code.)

Give the normal state of that background rectangle no border. Then right click it, choose Interaction Styles, and in the MouseOver tab of the dialog that pops up, check both the line width and line color checkboxes, setting them to 2 and green respectively.

Likewise, for the two icons, right click them and set their opacity mouseover interaction style to 100%, and then set their normal opacity to 0%. This way the will be invisible when not moused over and visible when moused over.

IMPORTANT! Now, to make all interaction styles act as a unit, group all objects, and in the properties palette for the group, turn on “Trigger Mouse Interaction Styles.” This way the mouseover event for the group triggers all mouseover events for its objects all at once.

This way you achieve what you want with no code, and you lose the latency problem.

Here’s a live sample from your file (I just copied and pasted a group I made out of your objects.)

Here’s the modified file: Hover.rp (169 KB)

3 Likes

Great! It’s working in my file.

Actually - there are many reasons (and a few bugs in some circumstances that even Axure recommend you to use) to use the OnMouseEnter and Out to trigger things and the latency is a big problem. I agree for simple buttons and stuff that MouseOver interaction style is the way to go, but OnMouseEnter really needs to be ALOT faster to fire - this is a big problem.

I’m having a latancy problem as well, but I’m not trying to just change the color of a shape. I’m changing a different dynamic panel state when I hover over an element and the lag is atrocious.

I am trying to hover an image. I am not sure how can I make it preload so there is no latency.