Tachyons

Docs

/

Themes

/

Hover & Focus

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

There are two classes for adding hover effects to elements. One dims an element on hover, the other will hide children within an element on hover. The dim class can be used on links of any color to give visual affordance to users

Examples

Dim Text

This link will dim on hover This link will dim on hover This link will dim on hover This link will dim on hover This link will dim on hover

Dim Card

KITTTTTTTY Dim any element and its children

Reveal Children on Hover

Reveal children elements on hover

Previous

Position
src/_hovers.css

<%= srcCSS  %>

<%= navDocs %>
<%= siteFooter %>