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:
- trigger effect on child elements when parent element gets:hover
Single
To launch the effect on single element :hover
state, use data-fx="hover:{effect}"
.
Hover over the elements:
<div data-fx="hover:bg-color--danger">Background color</div>
<div data-fx="hover:opacity--50">Opacity</div>
<div data-fx="hover:push--up">Push up</div>
Parent
Trigger multiple effects on child elements when parent element gets :hover
state use data-fx="hover/T:{effect}"
.
Hover over the wrapper:
<div data-fx-trigger="hover">
<div data-fx="hover/T:bg-color--danger">Background color</div>
<div data-fx="hover/T:opacity--50">Opacity</div>
<div data-fx="hover/T:push--up">Push up</div>
</div>
Multiple
You are free to combine multiple triggers between, or even with parent triggers in one data-fx
attribute.
Single
Use multiple hover:
in one data-fx
attribute.
Hover over the elements:
<div data-fx="hover:push--up hover:shadow--risen">Push & shadow</div>
<div data-fx="hover:shrink--small hover:bg-darken--5">Shrink & darken</div>
<div data-fx="hover:turn[5deg] hover:opacity--80">Turn & opacity</div>
Parent
Use multiple hover/T:
in one data-fx
attribute.
Hover over the wrapper:
<div data-fx-trigger="hover">
<div data-fx="hover/T:push--up hover/T:shadow--risen">Push & shadow</div>
<div data-fx="hover/T:shrink--small hover/T:bg-darken--5">Shrink & darken</div>
<div data-fx="hover/T:turn[5deg] hover/T:opacity--80">Turn & opacity</div>
</div>
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:
With important !
mark
Hover over the wrapper and single elements:
<!-- Default behavior -->
<div data-fx-trigger="hover">
<div data-fx="hover/T:bg-color--danger hover:bg-color--secondary">Push & shadow</div>
<div data-fx="hover/T:shrink--small hover:grow--out--small">Shrink & darken</div>
<div data-fx="hover/T:opacity--50 hover:opacity--10">Turn & opacity</div>
</div>
<!-- With `!` exclamation mark -->
<div data-fx-trigger="hover">
<div data-fx="hover/T:bg-color--danger !hover:bg-color--secondary">Push & shadow</div>
<div data-fx="hover/T:shrink--small !hover:grow--out--small">Shrink & darken</div>
<div data-fx="hover/T:opacity--50 !hover:opacity--10">Turn & opacity</div>
</div>