Hover actions are a simple way to display additional controls on a component only on hover or when focused. It also provides keyboard control for navigating through the hover actions. It is commonly used within table rows, however it can be used within an element of any kind.

To add hover actions to an element add a uxHoverActionContainer directive to it. This will define the container element that will contain hover actions. By default, container elements are given a tabindex of 0.

Within the container you should add the uxHoverAction directive to any element that is a hover action.

When the hover action container is hovered or focused, or a hover action within it is focused, the container will receive a hover-action-container-active class which can be used to apply additional styles when the container is active.

Additionally, each hover action will receive a hover-action-active class when the container is hovered or focused. A hover action will also receive a hover-action-focused class when that individual hover action is focused.

The following code can be used to create the example shown above: