How To Create a Mouse-Over Button in Timeline
The example below demonstrates how to create mouse-over buttons with highlights. Mouse-over buttons following this scheme work on desktops as well as on tablets. Tablets however will not display -- or display very briefly -- the highlighting, but handle "clicks" reliably and on the first tap.
We have a target widget that we want to show and hide: 'target'.
We have two buttons: 'red' and 'green', with two highlights: 'red_highlight' and 'green_highlight', respectively.
The target's state determines which of the buttons is visible:
'target' onshow: hide 'red', show 'green'
'target' onhide: hide 'green', show 'red'
The buttons hide and show the target:
'red' onclick: show 'target'
'green' onclick: hide 'target'
If one of the highlights is visible, it will capture the click. Hence, highlights hide and show the target too:
'red_highlight' onclick: show 'target'
'green_highlight' onclick: hide 'target'
Mouse-over highlighting is enabled by:
'red' onmouseover: show 'red_highlight'
'green' onmouseover: show 'green_highlight'
'red_highlight' onmouseout: hide 'red_highlight'
'green_highlight' onmouseout: hide 'green_highlight'
And to really finish things off:
'red' onhide: hide 'red_highlight'
'green' onhide: hide 'green_highlight'
All widgets in this example, except for the button 'red', should have the settings 'ignore timeline show' and 'ignore timeline hide' ticked.
Note: The highlights should be positioned exactly on top of their normal counterparts.