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(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>".

Hover over the elements:

Background color
Opacity
Push up
<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>".

All elements must be children of the parent element.

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.

Hover over the wrapper:

Scale
Opacity
Push up
<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.

Hover over the wrapper:

Scale
Opacity
Push up
<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.

Hover over the elements:

Push & shadow
Shrink & darken
Rotate & opacity
<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.

Hover over the wrapper:

Push & shadow
Shrink & darken
Rotate & opacity
<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.

hover: trigger doesn't work

Hover over the wrapper and single elements:

Push up
Scale
Opacity
With important ! mark

Hover over the wrapper and single elements:

Push up
Scale
Opacity
<!-- 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>