Built in Hover triggers

Trigger one or multiple effects when user hovers over the element

Overview

A Hover trigger, as the name says, triggers the effect transition (animation) when user performs :hover action on one or multiple elements. To add an effect on the single element, use Triggers. If you need to animate multiple effects at once, when the user hovers over the one (parent) element, use the Parent triggers. You can even combine these both triggers.

Syntax

Trigger syntax is as follows <hover|hover-T>:<effect> where:

  • hover: - trigger effect on element :hover
  • hover-T: - triggers the effect on child elements when parent element gets :hover

On single element

To launch the effect on single element :hover state, use data-tor-fx="hover:<effect>".

Hover over the elements:

Background color
Opacity
Push up
<div data-tor-fx="hover:bg(danger)">Background color</div>
<div data-tor-fx="hover:opacity(50)">Opacity</div>
<div data-tor-fx="hover:push.up(xs)">Push up</div>

On parent element

Trigger multiple effects on child elements when parent element gets :hover state use data-tor-fx="hover-T:<effect>".

Hover over the wrapper:

Background color
Opacity
Push up
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:bg(danger)">Background color</div>
  <div data-tor-fx="hover-T:opacity(50)">Opacity</div>
  <div data-tor-fx="hover-T:push.up(xs)">Push up</div>
</div>

Multiple effects

You are free to combine multiple triggers between, or even with parent triggers in one data-tor-fx attribute.

On single element

Use multiple hover: in one data-tor-fx attribute.

Hover over the elements:

Push & shadow
Shrink & darken
Turn & opacity
<div data-tor-fx="hover:push.up(xs) hover:shadow(risen)">Push & shadow</div>
<div data-tor-fx="hover:scale.to(75) hover:bg-darken(md)">Shrink & darken</div>
<div data-tor-fx="hover:rotate.to(10) hover:opacity(80)">Turn & opacity</div>

On parent element

Use multiple hover-T: in one data-tor-fx attribute.

Hover over the wrapper:

Push & shadow
Shrink & darken
Turn & opacity
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:push.up(xs) hover-T:shadow(risen)">Push & shadow</div>
  <div data-tor-fx="hover-T:scale.to(75) hover-T:bg-darken(md)">Shrink & darken</div>
  <div data-tor-fx="hover-T:rotate.to(10) hover-T:opacity(80)">Turn & opacity</div>
</div>

Effects combination

You can even combine hover: with hover-T:. But because hover-T: has a higher priority it may override hover: trigger on some effects. Place exclamation mark ! before the trigger shorthand like this !hover:<effect>. This will add !important attribute to the trigger and override the parent trigger. This is useful when you have couple of similar elements and you need to animate them once the parent trigger is hovered, but you also need to trigger the animation (transition) on individual elements :hover state without nesting them.

hover: trigger doesn't work

Hover over the wrapper and single elements:

Push & shadow
Shrink & darken
Turn & opacity
With important ! mark

Hover over the wrapper and single elements:

Push & shadow
Shrink & darken
Turn & opacity
<!-- Default behavior -->
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:bg(danger) hover:bg(secondary)">Push & shadow</div>
  <div data-tor-fx="hover-T:scale.to(75) hover:scale.to(125)">Shrink & darken</div>
  <div data-tor-fx="hover-T:opacity(50) hover:opacity(10)">Turn & opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:bg(danger) !hover:bg(secondary)">Push & shadow</div>
  <div data-tor-fx="hover-T:scale.to(75) !hover:scale.to(125)">Shrink & darken</div>
  <div data-tor-fx="hover-T:opacity(50) !hover:opacity(10)">Turn & opacity</div>
</div>