Hovering over an element (for example, triggered by a mouseover action on desktop browsers) is not supported on touch devices.
Instead, hover events (and any styles applied using the :hover pseudo-class) are typically triggered on press, and the corresponding mouseout is only triggered once the user presses another
element. The hover state may therefore stay in place long after the initial tap occurs.
The templates include an optional function that can be used on touch devices to automatically add the hover state on press
and then remove it after a specified interval. The function works by dynamically adding a class called .hovering to the element and then removing this class after a specified interval. This function is optional but can be useful in cases
where it would be confusing to users for a hover state to remain in place for more than a few seconds.
There are two ways to apply this behaviour:
Adding the behaviour to a single element
- Add
onMouseDown="JavaScript:doHighlight(this);"to an element. - Locate the
:hoverpseudo-class associated with that element, and then rename it.hovering. Note: Some elements may not yet have a:hoverpseudo-class.
Incorporating the behaviour unobtrusively
The slide show component provides an example of this behaviour applied unobtrusively. The doHighlight() function is called whenever an onmousedown event is detected. As described in the instructions above, the related :hover pseudo-class has also been removed and replaced with an identical class called .hovering.
