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.