Forum Discussion
Hover button
Hi, I created simple buttons which will call caption on hover function. The issue is I can't make the caption on top of other buttons. "Bring to front function" didn't help.
If you really need to achieve this, you could work around it with JavaScript by temporarily raising the caption’s position using z-index when the button is hovered, then restoring the original z-index once the button returns to its normal state (attached).
That said, there are many reasons why this approach may create more problems than benefits, as JudyNollet and PhilMayor pointed out in their comments, and their reasoning makes perfect sense. If you are not comfortable with JavaScript, or you are not familiar with modifying code, working with z-index, and managing element stacking behavior, I would not recommend this solution. In that case, it would be much better to place each caption on separate layers, as suggested by Phil and Judy.
7 Replies
Are you able to share a project (.story) file or add more about how you can't produce the same effect on other buttons?
I created 1 button/object and copied it to get 3 buttons. And only 1 with expected behavior that the caption appears on top of other buttons. So when hover on the other 2 buttons, caption will appear below the button.
How objects overlap if they intersect is based on the order they appear in the Timeline.
Here are your three buttons rearranged to overlap. Rectangle 3 (the red one) appears above the other two because it is at the top of the Timeline. Rectangle 1 (the blue one) appears under the red and purple (2) rectangles.
The captions are part of each rectangle. So they will overlap in the same way. In other words, you can't make those captions appear above any rectangle that is higher on the Timeline.
Instead of inserting a caption into the Hover state, you could show a layer with the caption.
Note, though, that it is not accessible to put unique content into Hover state. Those who navigate with a keyboard or who are using a mobile device can't "mouse over" anything. So they'd never be able to view that caption.
I suggest you reconsider how to present the content so folks won't miss anything if they can't hover.
completely agree with Judy putting the caption inside the state is the big issue, stick it on a layer
Assuming I have a pic with many objects to describe. I thought it's easier to use hover function to trigger description of each object.
What happened, the description appears below other object.
AndiTamzil: Any object inserted into another object's Hover state will appear over or under other objects on the slide based on the order of all the objects in the Timeline. (Refer back to my earlier reply for a fuller explanation.)
The only way to have all the descriptions appear above all of the buttons is to make each description a separate object.
- The easiest method would be to put each description on a layer. Keep the default Slide Layer Property so when a layer shows, that hides other layers.
- Alternately, you could put the objects on the base, and use a whole lotta triggers to change them between Hidden and Normal.
I'll also repeat my previous note: It is not accessible to put unique content into Hover state. Those who navigate with a keyboard or who are using a mobile device can't "mouse over" anything. So they'd never be able to view that caption.
Therefore, a description should be shown when someone clicks a button (not when they mouse over it).
If you really need to achieve this, you could work around it with JavaScript by temporarily raising the caption’s position using z-index when the button is hovered, then restoring the original z-index once the button returns to its normal state (attached).
That said, there are many reasons why this approach may create more problems than benefits, as JudyNollet and PhilMayor pointed out in their comments, and their reasoning makes perfect sense. If you are not comfortable with JavaScript, or you are not familiar with modifying code, working with z-index, and managing element stacking behavior, I would not recommend this solution. In that case, it would be much better to place each caption on separate layers, as suggested by Phil and Judy.
