Hover intent in axure

#1

Hi Everyone
Looking to create a delay on a hover state…in short it’s a hover state that does not trip any activity when a user is casually going across the website screen.

But the hover state WILL ACTIVATE - only when the cursor is stopped on the state after about 150 milli seconds.

Does anyone have a file I could check out to see the program of the action on this please?
Just want a smooth page that does not trip every hover state and will make a much better experience.
Thanks: Daryl

#2

It can be done, but it sucks. In my quick and dirty implementation, every item that acts this way has to be its own dynamic panel with a default and a hover state, plus some way of tracking whether the mouse left during the wait. In my case, it’s a hidden checkbox.

delayed hover.rp (54.6 KB)

Any time you mouse out of the dynamic panel, it checks the hidden “mouseleft” checkbox. When you mouse over the panel, it waits 150 ms then moves the panel by 0,0. The OnMove handler checks to see if “mouseleft” is true, and if it isn’t, it changes to the hover state. Otherwise, it resets everything to default.

You could alternately set it up so when the timer is up it just checks whether the cursor is currently inside the boundaries of the dynamic panel, but that would technically allow for some weird flickering if you moved on/off very quickly, particularly if you had multiple panels like this.

#3

Thanks and will go through this…thought I’d just find a simple delay switch in Hover Panel set-up. Looks like I will need to play now…best: Daryl

#4

Hi ColinB
Just to see if I understand this coreectly

  1. I make my artworks ans 2 states (no hover with hidden checkbox on it)
  1. Hover state
  2. Once all that is done go back to my first base layer and make a Dynamic Panel and program this interaction (as your artwork).

Hope I have this right please. Thanks Daryl

#5
  1. Create a dynamic panel with two states: normal and hover. Add your artwork for each state.
  2. In either state, create a hidden checkbox behind your artwork and call it “mouseleft” or something like that.
  3. For the panel:
  • OnMouseEnter: Uncheck “mouseleft”, wait 150 ms, move dynamic panel by (0,0)
  • OnMouseOut: Check “mouseleft”, set state of dynamic panel to normal
  • OnMove: if “mouseleft” is unchecked, set state of dynamic panel to hover, else set state of dynamic panel to normal and uncheck “mouseleft”

That should do it.

#6

Thank You very much Colin - ‘a true star’