Button's Hover state doesn't work after mousing over a Disabled button

Jul 26, 2018

I created an interaction with 8 clickable, transparent buttons on top of a spreadsheet graphic; each button sits on top of a column in the spreadsheet (shown on the base layer). I present a series of 6 question layers (one at a time). For each question, incorrect clicks change the selected button(s) to their Incorrect state (add a Red X graphic). Clicking the correct button for Q.1  (1) disables that button for the rest of the exercise (Disabled state adds a Green check graphic), (2) resets all other buttons to Normal, and (3) presents the next Question. (I used a variable to track which question is current and therefore which button is correct for each question.)

Each transparent button also includes a Hover state (an arrow pointing to the column), which works fine EXCEPT when you mouse over a Disabled button immediately before mousing over the button. The only way to see a button's Hover state is to deliberately mouse over anything other than a disabled button first. But there are 8 adjacent columns/buttons, and learners will want to move the pointer side to side, which means they won't see the Hover states of the remaining buttons and will miss the next correct answer.

I tried changing the Hover state to simply add an outline instead of showing an arrow shape, but that didn't fix the problem.

Has anyone else run into this?  Any ideas on how to fix it?

38 Replies
Pete Richardson

My workaround:

  • Add a hidden 'dummy' button over top of the original button
  • The Normal state of that 'dummy' button should match the Disabled state of the 'real' button
  • Create a Hover state for the 'dummy' that is also identical to the Disabled state of the 'real' button
  • When the user clicks on the 'real' button, set the state of the 'dummy' button to Normal
  • You will find that adjacent buttons will now show their Hover state correctly
Carl Beyboer

I've found something similar.  Slides with media (video or audio) seem to exhibit the problem more.

Issue:
Hover state shows as blank when the user hovers over a button.  Leave the mouse there for a moment or a few seconds and then the hover state appears.  once it has "cached" the problem is gone on that slide. Can replicate in SCORM Cloud and Review 360.  No sign of the problem if you simply preview the project within Storyline.

Fix:
Put images of the button's hover state under the actual button so that when the button goes blank, it still shows the dummy button underneath.  Not very elegant but it works.  The interesting thing is that the project still thinks there is a button there while you are hovering, even if it disappears as the mouse cursor is still in the correct mode (hand pointing) and clicking still works.

Very frustrating!

Ren Gomez

Hi Kariñe,

Thanks for following up, and I"m sorry this bug is significantly affecting your course. To help you plan, it's unlikely to be fixed in the next couple of updates.

I'll be sure to update our report for the impact on your project and recommend sharing the file with our team to see if a workaround is possible!

Kariñe Idigoras

Thanks Ren.

I used the transparent box on top of buttons, and it works fine, but it is really annoying having to set 12 visible/hidden transparent boxes on top of 12 disabled/enabled buttons based on complex conditions.

Please take a closer look at this bug, it is really frustrating and I am quite sure that many people will get concerns from their clients, not being able to know that the problem pops up when you put your cursor on a disabled button.

Lauren Connelly

Hi all!

I'm excited to return to this discussion with exciting news! We just released Storyline 360 (Build 3.55.25954.0), which includes the fix for the bug where sometimes a hover state wouldn't appear when there were disabled objects on the same slide, and sometimes text shifted when hovering over an object in a course using the classic player.

To take advantage of the newest release, make sure to update Storyline 360 in your Articulate 360 desktop app!

Please don't hesitate to reach out to us if you run into any issues updating or have additional questions. You can reach us in this discussion or by submitting a support case!

Stay well!

Maria Costa-Stienstra

Hi, everyone.

I have exciting news to share!
We just released another update for Storyline 3. In the latest build (3.13.26122.0), we’ve included important fixes and new features.

One of the fixes we’ve included is:

Hover state in an object does not work if you mouse over on another object with a disabled initial state

To take advantage of this fix, make sure to update Storyline 3!

Please let us know if you have any questions by posting here or by reaching out to our Support Engineers directly.