Built in Hover triggers

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(p)>:<effect> where:

• hover: - trigger effect on element :hover
• hover(p|<selector>): - 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="hover:<effect>".

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

On parent element

Trigger multiple effects on child elements when parent element gets :hover state by using data-tor="hover(p|<selector>):<effect>".

Using data-tor-parent

Add data-tor-parent="hover" to the parent wrapper element, then use hover(p):<effect> to trigger multiple effect when the parent element is hovered.

<div data-tor-parent="hover">
  <div data-tor="hover(p):scale.to(75%)">Scale</div>
  <div data-tor="hover(p):opacity(50)">Opacity</div>
  <div data-tor="hover(p):push.up(xs)">Push up</div>
</div>

Custom parent selector

It’s also possible to trigger multiple effects without data-tor-parent element. Just use hover(<selector>):<effect> and target your desired element.

This example shows how to create multiple effects when the parent #wrapper selector is hovered.

<div id="wrapper">
  <div data-tor="hover(#wrapper):scale.to(75%)">Scale</div>
  <div data-tor="hover(#wrapper):opacity(50)">Opacity</div>
  <div data-tor="hover(#wrapper):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 attribute.

On single element

Use multiple hover: in one data-tor attribute.

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

On parent element

Use multiple hover(p): in one data-tor attribute.

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

Effects combination

You can even combine hover: with hover(p):. But because hover(p): 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.

<!-- Default behavior -->
<div data-tor-parent="hover">
  <div data-tor="hover(p):push.up(xs) hover:push.up(md)">Push up</div>
  <div data-tor="hover(p):scale.to(75%) hover:scale.to(125%)">Scale</div>
  <div data-tor="hover(p):opacity(50%) hover:opacity(10%)">Opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-tor-parent="hover">
  <div data-tor="hover(p):push.up(xs) !hover:push.up(md)">Push up</div>
  <div data-tor="hover(p):scale.to(75%) !hover:scale.to(125%)">Scale</div>
  <div data-tor="hover(p):opacity(50%) !hover:opacity(10%)">Opacity</div>
</div>