Remove or Speed Up All Hover Interactions

[Nuera]

Sometimes we like when a button or text link displays the slow fade from its base color to its interactive color. However, ther are many instances when we just want it to show the hover state with no fade animation.

Is there a way to remove all hover animations site-wide?

This is the site we’re currently working on: https://shrimpshack.nueramarketing.com/

I’ve implemented the following code for CSS and JS as it pertains to dropdowns, but I haven’t been able to figure out how to isolate menu navigation or text yet.

/* Remove Dropdown Delay */
body .x-masthead .x-dropdown,
body .x-masthead .x-anchor,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active {
transition-delay: 0s, 0s, 0s !important;
transition-duration: 0s, 0s, 0s !important;
transform: translate3d(0, 0, 0) !important;
}
@media ( min-width: 980px ) {     
    li.menu-item-has-children > ul {
     display: none !important;   
    }
    
    li.menu-item-has-children:hover > ul {
     display: block !important;   
    }
 }

Please let me know if there’s an easy fix for this. Thanks!

[ruenel]

Hello @Nuera,

Thanks for posting in!

To resolve your issue, please have the code updated and use this:

body .x-masthead .x-dropdown,
body .x-masthead .x-anchor, 
body .x-masthead .x-anchor-text-primary, 
body .x-masthead .x-anchor-text-secondary, 
body .x-masthead .x-anchor-sub-indicator,
body .x-masthead .x-active,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active {
    transition-delay: 0s, 0s, 0s !important;
    transition-duration: 0s, 0s, 0s !important;
    transform: translate3d(0, 0, 0) !important;
}

@media ( min-width: 980px ) {     
    li.menu-item-has-children > ul {
     display: none !important;   
    }
    
    li.menu-item-has-children:hover > ul {
     display: block !important;   
    }
}

We would love to know if this has worked for you. Thank you.

[Nuera]

PERFECT!

Thanks so much!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Nuera]

Would it be possible to add button transitions into this list as well?

[nabeel]

Hey @Nuera,

For the buttons, you can replace the previous code with the following:

body .x-masthead .x-dropdown,
body .x-masthead .x-anchor, 
body .x-masthead .x-anchor-text-primary, 
body .x-masthead .x-anchor-text-secondary, 
body .x-masthead .x-anchor-sub-indicator,
body .x-masthead .x-active,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active,
body .x-anchor-button {
    transition-delay: 0s, 0s, 0s !important;
    transition-duration: 0s, 0s, 0s !important;
    transform: translate3d(0, 0, 0) !important;
}

@media ( min-width: 980px ) {     
    li.menu-item-has-children > ul {
     display: none !important;   
    }
    
    li.menu-item-has-children:hover > ul {
     display: block !important;   
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Nuera]

Perfect, thanks!

[thai]

You’re most welcome.