Triggers Hover

Trigger class change when element gets :hover state

Overview

Change the one or multiple classes on element :hover state.

Syntax

data-tor="hover:class.<action>(<classes>, {<options>})"

Where:

• <action> - performed class action. This can be add, remove or toggle
• <classes> - a list of classes to change separated by the space
• <options> - additional options such as target element

Examples

Add class

To add a class to the element itself, use class.add() action. We are adding an .opacity-50 class when the user hovers on that element.

<div data-tor="hover:class.add(opacity-50)">Hover to add</div>

Remove class

To remove a class from the element itself, use class.remove() action. We are using the click trigger, to remove a .opacity-50 class when the user hovers on that element.

<div class="opacity-50" data-tor="hover:class.remove(opacity-50)">Hover to remove</div>

Toggle class

To toggle a class on the element itself, use class.toggle() action. We are using the click trigger, to toggle a .opacity-50 class when the user hovers on that element.

<div data-tor="hover:class.toggle(opacity-50)">Hover to toggle</div>

Multiple classes

You can also change multiple classes at once, just separate them with a space.

<div data-tor="hover:class.toggle(opacity-50 bg-dark rounded-xl)">Hover to toggle multiple classes</div>

Options

Target element

The power of Torus Kit Class actions is in the ability to address the class change to any element on the page. Use target: key in the options to define a desired target element.

<div data-tor="hover:class.toggle(opacity-50, {target: #dark-element})">Example</div>
<div id="dark-element">Dark element</div>

You can also change the class on multiple elements. Just use a class selector, instead of id.

<div data-tor="hover:class.toggle(opacity-50, {target: .change-me})">Example</div>
<div class="change-me">Dark element</div>
<div class="change-me">Dark element</div>
<div class="change-me">Dark element</div>