The first step is to copy the code bellow and paste it under Before </body> tag:

<script>
// For all custom triggers
$("[mh-trigger-custom]").each(function () {
   // Get targets IDs
   let targetID = $(this).attr("mh-trigger-custom");
   // With the IDs get the elements
   let target = $("[mh-target-custom='" + targetID + "']");
   // Configurates the hover
   configurateHover(this, target);
});

// For all children triggers
$("[mh-trigger-children]").each(function () {
   // Get the targets inside
   let target = $(this).find("[mh-target-children]");
   // Configurates the hover
   configurateHover(this, target);
});

function configurateHover(trigger, target) {
   // When the trigger gets hovered
   $(trigger).on("mouseenter", function() {
       // Adds the hovered class to the target
       $(target).toggleClass("hovered");
   });

   // When the trigger gets hovered out
   $(trigger).on("mouseleave", function() {
       // Removes the hovered class from the target
       $(target).toggleClass("hovered");
   });
}
</script>

Styling

We are not going to use the normal flow to style the hover state of an element, by selecting the element and than select the hover state inside the Style selector.

We must create a custom class to style the hover state of the elements we want to target:

1. Select the element that you want to work as the target;
2. Create a custom class named hovered;
3. Style the hover state;
4. Now you can remove the hovered class. But remember to save the element with the custom class inside your style guide or any other page so you don't lose the style when cleaning up the unused classes.

Setting up

We have two trigger options. The first one will trigger the hover state of any element at the page, and the second one will trigger the hover state on the trigger children.

Configuring the custom trigger:

1. Select the element that will work as the trigger and under Element settings create a new attribute and on name you must use mh-trigger-custom and the value must be any text that links both trigger and target;
2. Select the element that you want to be the target and under Element settings create a new attribute and on name you must use mh-target-custom and the value must be the sabe value that you placed on the trigger.

When looking at the cloneable, we can see that both buttons have the attribute mh-trigger-custom with the value mh-hero-lottie, and the lottie image has the attribute mh-target-custom with the same value.

Configuring the children trigger:

1. Select the element that will work as the trigger and under Element settings create a new attribute mh-trigger-children leaving the value field empty;
2. Select a child from the element that you want to be the target and under Element settings create a new attribute mh-target-children leaving the value field empty.

When looking at the cloneable, we can see that the services card links has the attribute mh-trigger-children and inside it we have a div that is our button that has the attribute mh-target-children.

Additional information

It is possible to use an element as a trigger and as a target. Look at the cloneable, the button is used to trigger the hover state from the lottie but it also the target inside the services card links.

To prevent you from styling the hover state and the custom class hovered, create the attribute mh-get-hovered with value of true. When the element is hovered, the custom class hovered will be added.

‍

Remember to publish your site to see it in action.