Selecting a Selector (class) to work for Hover only

[radamson]

So I’ve got two separate selectors, both have a different color. My aim is to have selector-1 be the Normal State color and selector-2 to be the Hover State color of an object (eg, a Button).

I want to achieve this as these color classes control the sites overall colors. Thus changes to selector-1 should reverberate through the site.

Any assistance in achieving this would be welcome

Thanks

[samliew (webflowexpert.com)]

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('body').on('mouseover', '.selector-1', function() {
    $(this).removeClass('selector-1').addClass('selector-2');
  });
  $('body').on('mouseout', '.selector-2', function() {
    $(this).removeClass('selector-2').addClass('selector-1');
  });
});
</script>

Paste this in Site Settings > Custom Code > Footer Code.

Only works on published sites.