Hover and click reveal different layer
Aug 20, 2021
I'm having issues with hover and click on the same button working properly -
On the base layer I have taken a screenshot of a form in my software training. For each field on the form, I added a transparent button and provided instructions to the learner to hover over the field for information. I added a trigger to display a layer with a text box and audio explaining the field when the cursor hovers over the button/field. I added another layer with a screenshot of the drop-down list (for the fields that have a drop-down arrow) to show a sample list when the learner clicks the button/field.
When previewing (and published for review), the cursor (on some of the buttons/fields) when hovered (on parts of the buttons) will bring the layer in but blinks in and out on the screen until the cursor is moved to either the very top or bottom of the button. And, the hand cursor for the click element of the button only displays in certain parts of the button.
Is this a known issue and is there a fix/workaround without having to dismantle the work I've put in to create (multiple layers)?
5 Replies
It's known, but not really an issue. What happens is that when the layer shows, something on the layer comes between the button/field and the cursor, breaking their contact. Since it is set (by default) to restore when mouse hovers off, the layer is hidden, reconnecting the button and cursor, at which point the hover trigger kicks back in, etc., etc.
The hand cursor is the same problem; it only shows when there is a clear path between the item the trigger is attached to, and the cursor. That can be caused by something on the layer, or if a layer is not showing, it can be a group (don't use groups), or some other item covering the item with the trigger.
This makes no sense to me...based on the feedback from Walt (thanks Walt) I've condensed the layers to show the information and the list (for the fields that have a drop-down) onto one layer for each field. This eliminated the hover trigger and left just the click trigger for each button. I've made sure the buttons, on the base layer, are on the top of the timeline (not covered by anything) and removed all the hover triggers... It still is not working correctly. The hand/finger cursor indicating it's clickable should be in all areas of the button, but it's not, the user has to move the cursor to the very top, the very side(s), or the very bottom of the button to be able to click on the button and reveal the layer with the content (that would frustrate me as a learner). I've attached images of the slide, the timeline showing the buttons are not covered and a few of the triggers and layers. What can I do?
the user has to move the cursor to the very top, the very side(s), or the very bottom of the button to be able to click on the button
This is a classic description of a button with no fill. The simplest solution is to cover the button with a shape with no outline, filled with any color, with its transparency set to 90% or higher. Attach the trigger to clicking that shape.
If that isn't the problem, attach the .story file, or at least that slide here, so someone can take a closer look.
Thanks...replacing each button with a filled Shape (rectangle) at 96% transparency did the trick...it's unfortunate Articulate has to be tricked to function correctly (I know, my opinion) but I'm glad you knew the trick.
Actually, it does make sense. Something without a fill (maybe it was designed to be see-through) doesn't have anything in there to catch the mouse click. On the other hand, transparent pixels are also see-through, but they do exist, so they can catch the click.
Anyway, you're welcome. PIAWYC (Pass it along when you can).