Mirror hover state between elements
.
Learn how to trigger a hover state on one element when another is hovered without using an interaction to do that.
![](https://cdn.prod.website-files.com/63d26d208f0c877fc19ba572/643da5a2769dbfaba4fad6d4_Mirror%20hover%20state%20between%20elements%20-%20Site.jpg)
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:
- Select the element that you want to work as the target;
- Create a custom class named hovered;
- Style the hover state;
- 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:
- 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;
- 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:
- 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;
- 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.