Hover and click trigger to show layer

Jul 11, 2021

Luis Kaj
By Luis Kaj

Hello,

Forgive me if this has been answered, but I could not find a solution for my problem: I have a series of buttons (on the left side of the screen), each linked to its own image that would appear on the right side of the screen; each image is on its own layer - if I create a trigger for the image to appear during a HOVER over a button, it would work; conversely, if I create a trigger for the image to appear after a CLICK, again, it would appear - however, I cannot get the trigger to incorporate both (when I click, the image would disappear and the mouse would no longer hover over the button, as it is checked as a condition in the HOVER trigger).  Thank you.

When the user hovers over Nature Button

-Show layer Nature (Hide layer when the user hovers out)

When the user clicks Nature Button

-Show layer Nature

Luis Kaj

8 Replies
Walt Hamilton
almost 3 years ago07/11/21 at 7:39 pm (UTC)

You say:

 the mouse would no longer hover over the button, as it is checked as a condition in the HOVER trigger).

The only way for the mouse to no longer hover over the picture is for the learner to physically move it, or something to appear between them. Once the layer disappears, the mouse is hovering over the object.

On the other hand, if this represents your actual triggers:

When the user hovers over Nature Button

-Show layer Nature (Hide layer when the user hovers out)

When the user clicks Nature Button

-Show layer Nature

What is going to happen is that the hover will show the layer. If there is nothing on the layer to disrupt the mouse-picture connection, the layer will stay visible. When the learner clicks, nothing will appear to happen, as the layer is already showing.

Not sure why you want to do this, but it will probably only function the way you describe it if something malfunctions. The hover will always come first and will show the layer, so clicking has no visible effect. Moving off the picture will hide the layer, but after moving off, you can't click it.

If I have misunderstood your question, perhaps you can clarify by attaching your .story file here.

Luis Kaj
almost 3 years ago07/12/21 at 1:51 am (UTC)

Thank you for replying, Walt.  My idea was to have the user enjoy a "preview" of the image by Hovering over the button, before actually selecting it via the Click action. I was hoping that the Click trigger would over-ride the Hover action after it has been selected by the user...

Laura MacNeil
over 1 year ago11/30/22 at 2:20 pm (UTC)

My issue too! I was hoping to have a labelled diagram, where you hover over the labels/parts of the image (denoted by letters).

When you HOVER over the A LABEL on the diagram, LAYER A shows until you hover out.  (FYI, LAYER A and all other layers, show zoomed in on what is highlighted elsewhere on the slide).

The same as OP. Hover works or click works--but not both at once.

I wanted to make the lesson more accessible to mobile users so have to include more than just a hover state:

Thinking I outsmarted Articulate, I set LAYER A (what shows when hovering over A LABEL) to only have a click option on A LABEL, so when you hover, and LAYER A shows, you would only be able to click A LABEL. 

I fear I've stopped making sense--but I am having the same issue and simply changing the state of an image would be a massive amount of work for all the content I've got on with the number of layers and amount of content on each one. 

I'll see if I can come up with an easier work around--or I fear I may have to eli,imate the hover option.  

Sign In to Reply