Hover issue with one of 5 'hover spots' on the same slide...

May 11, 2017


This one has me baffled. In the attached file, the four rollovers/hover state next to each other work just fine. On the fifth one, it’s as if all of the boxes AND the text instructions were “sent to front”, but they’re not!!! I created every single one of them the exact same way, but ran into issues with boxes 'showing through.' I fixed the problem by sending backward (not Send to back).  I also tried using the format painter so that they were all uniform. That seemed to take care of it for the top 4. But not for the Change History, the shaded box that’s lower on the slide. I’d swear it’s still a send to back/front issue, but I’m not sure--I've tried them all. If I move the box with the explanation in it to the bottom part of the screen, nothing shows through. I guess that’s logical, as it’s only the one image underneath at that point. I made sure the box with the explanation was a Send to Front. I also checked to make sure my fill wasn't transparent making things show through. 

So it's got to be something with the four boxes and one line of text. And I'm guessing something with the send back/front. I'm afraid if I do anything to them, though, then they'll start showing through when I hover over other boxes. It's like a moving target. Fix it in one place and cause a problem in another! 

I'm doing a bad job of explaining, but when you see it, you'll know what I mean. 



7 Replies
Alyssa Gomez

Hi JB!

Thanks for sharing your file. This is actually working as expected--a hover state for an object will not cover anything above that object on the timeline. That's why moving the 'Change HVR' rectangle to the top of the timeline creates issues for the other four hover states.

To get around this, use layers instead of hover states. You'll also need a hover trigger for each rectangle. For example:

Show layer [Change HVR] when mouse hovers over rectangle [Change HVR]

I hope this helps!

Janet Bernhards


Thanks for your reply, but I'm confused by it. I *do* understand your proposed solution though.

Are you saying that hover states have to do with the order of items on the timeline? I haven't run into that in other projects. I'm getting confused with "above" and "below" on the timeline vs. "above" and "below" the selected item on my screen.

If the hover doesn't work for anything above that object on the timelines, then why are the other hovers working?

I searched for some documentation on this but only came up with other discussions. Can you point me to anything? I might try to cross-post, as it looks like someone else had this issue.

Right now I'm more interested in trying to understand what causes the problem, as I'm sure I can implement your solution. Seems like extra work, though!



Walt Hamilton

You say "Are you saying that hover states have to do with the order of items on the timeline? I haven't run into that in other projects. I'm getting confused with "above" and "below" on the timeline vs. "above" and "below" the selected item on my screen."

What Alyssa refers to is up and down in the timeline, which is the same thing you are referring to when you talk of sending an object back. The top to bottom order on the timeline is a visual representation of the front to back order.

Right to left on the timeline refers to time.

In the video, notice that none of the first 4 boxes have a problem with box 5 because they are all above it, and their hover state covers it. They don't have a problem with each other because their hover states all show up in a different part of the slide. Then when I edit box 2 and move its hover state to a different part of the slide, where those boxes are, it is in over (above, in front of) some, and under (below, behind) others. The same thing happens when I change the front to back position of box 5. The front to back order is often referred to as the z-position. S and y are the first two dimensions, and z is the third.

The answer is either layers, or putting the different hover states where they don't interfer with each other, like in the last step.

Janet Bernhards

Alyssa and Walt,

Thank you both for the replies AND for taking the time to make videos. That really helped. I think in my past projects, and the first four hovers on this one, I was just plain lucky. That is, I moved things around, sent forward/backward without realizing exactly how they were affecting what was on the screen (not to mention the timeline).

In fact to be sure I was understanding Alyssa's first reply, I created a new shape on the screen and saw it was at the top of the timeline, as expected. I sent to back.... and was surprised to see it move to the bottom of the timeline!! That was an eye-opener!

So, I see the relation, and I see that my options are either to put my fifth explanation box at the bottom (I had tried that but it didn't like the fact that now the fifth hover was covered... but I might change my mind :-) ) or do as Alyssa suggested and use layers.

Thank you so very much for the time you put into this.



This discussion is closed. You can start a new discussion or contact Articulate Support.