data-ix-Hoveractive
hover-Active
Summary
This solution allows you to create items that get active classes when they are clicked which is great for state tracking unique interactions or setting up filter lists.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The hoveractive item has three interrelated elements, the only necessary one for the solution to work is the trigger element.
Attribute Name
Value
Default
Description
data-ix-hoveractive=trigger
wrap
boolean
An item that will get a class of is-active when hovered over and have it removed when hovered out.
data-ix-hoveractive=target
wrap
boolean
An additional element that will also get the active class when the trigger is hovered. In order for them to be linked they both must share the same value for a data-ix-hoveractive-id attribute.
data-ix-hoveractive=wrap
wrap
boolean
The element containing all your hoveractive triggers. If items are not inside a wrap they will still work but some of the options won't be available.
03
Options
All options are applied to the data-ix-hoveractive=wrap element unless otherwise stated
Attribute Name
Value
Default
Description
{prefix}-id
string
null
Use this attribute to pair a trigger and target element by giving them matching values to this ID attribute. This is required for a target element to work.
{prefix}-class
string
is-active
The active class used on the trigger element. (this option can be applied to the wrap or the trigger)
{prefix}-keep-active
boolean
false
Prevent trigger from being de-activated when hovered out.
