Disable the hover-state when in selected state

Feb 16, 2023

Stefaan Leleu
By Stefaan Leleu

Hi,

I'm currently developing a template for a glossary. For each letter of the alphabet I have a slide with buttons that link to a layer where the terms can be explained. For each letter-slide there are 20 buttons embedded in a scrolling box of which 8 are visible at a time. Each button has a hover-state and selected state and is part of a button set. When I click a button the button is in selected state. However, you can not immediately see the selected state, because as long as the cursor is on top of the button the hover-state will be displayed. This in itself is something we want to avoid. The hover-state should be for something clickable, so it makes no sense that a selected state can be hovered.

The workaround would be to place a hotspot (without hand) on the layer on the exact location of the button so that the hover-state wouldn't be triggered. However, this does not work with a scrolling box, because the buttons move and therefore do not have an exact location.

On top of this, the hover-state on the layer does not display correctly either. It shows the button fill of the hover-state, but the font of the selected state. And to make matter worse, it doesn't always do this.

I added the story of the template of which only slides A, B and C are added. It would be awesome if someone could look into this!

7 Replies
Daniel Canaveral
1 year ago02/16/23 at 1:05 pm (UTC)

Hi Stefaan. Lucky for you, Tom Kuhlmann recently addressed this very issue:

Quick Tips: How to Combine Hover & Selected States in Storyline 360 (articulate.com)

Basically, the trick here is to create the object's Selected state as usual, but don't adjust the properties of the object copy SL auto-generates. Instead, create a new copy of the object (or copy and paste the object in the Selected state if already created) with the adjusted properties (color, font size, stroke, etc.), and then position it so it sits right on top of the auto-generated copy:

P.S. I noticed the letters across the top are not assigned to a Button set just yet.

Glenda DeHoff
9 months ago08/09/23 at 1:34 pm (UTC)

I spent entirely too much time on this issue. I tried all of the above recommendations, but am still seeing a rendering issue - with a twist. :/

The FIRST time I hover over the Submit button and then click it, all works as designed. The SECOND time (set up for try again) I get a wonky render issue - the text box seems to enlarge and cover a portion of the button outline behind it. The THIRD time I hover over the Submit button and click it, all is well again. Does anyone have any ideas?

Sign In to Reply