Strange rollover bug on simple quiz interaction

I am experiencing a rollover bug that I would like some help fixing. Thanks for reading...

My client's requirements for this interaction is that there are 3-4 answers, each with their own feedback layer. Users cannot select the same option twice, and they must select answers until they get the correct one. 

However when you select a wrong answer and its feedback layer comes up, that layer is apparently blocking the rollover mouse event from reaching the buttons directly above or below the selected one. This happens despite nothing on that layer covering the buttons, and does even when that feedback layer is empty. If I roll away and back to that button, then the rollover works. 

To try it yourself, download the file I have attached and do the following:

1. click the first answer and view the feedback layer

2. immediately move your mouse to the second answer, the hand cursor shows up but you do not see the rollover state

3. roll over the 3rd answer, the rollover state works

4. go back to answer 2, and the rollover state works again

 

thanks for taking a look!

Nick

4 Replies
Jeff Forrer

Hello.  I took a look, the Normal state is looking to the black box as the reference point for your rollover.  If you roll over the black box on all buttons, the Hover always works.  

I think this is because you might have started out with the black box as your initial state, then added the white dialog after?

If you create a new button with the dialog, add your states and then adjust, (i.e. add black box, paste into each state), this should fix it. 

Or you could adjust the black box and make transparent so the buttons think it is the hot area, then add a new black box.