Toggle a combo class on hover

General
1

Hi pros!

I’m trying this code using the F’insweet Class Adder:

I want to toggle a combo class where the target is the trigger itself.

<script>
// when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
 // Hover in on .header_interactive-text
 document.querySelectorAll('.header_interactive-text').forEach(trigger => {
  trigger.addEventListener('mouseover', function(){ 
    this.closest('.header_interactive-text').classList.add('text-style-outline'); 
  });
 }); 
 
 // Hover out on .header_interactive-text
 document.querySelectorAll('.header_interactive-text').forEach(trigger => {
  trigger.addEventListener('mouseout', function(){ 
    this.closest('.header_interactive-text').classList.remove('text-style-oultine'); 
  });
 }); 
});
</script>


.text-style-outline {
	-webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-stroke: 0.7px #d4c5e2;
}

mouseover is working, but on mouseout is not removing the combo class, any ideas?

Thanks :smiley:

2

Hey @mtinmendivil! you seem to have a typo in your mouseout event on the classList.remove() class

Try this instead

  document.querySelectorAll('.header_interactive-text').forEach((trigger) => {
    trigger.addEventListener('mouseout', function () {
      this.closest('.header_interactive-text').classList.remove('text-style-outline');
    });
  });
1 Like
3

Thank you friend!

Trying to code and being kinda dyslexic it’s a challenge jaja!

4

All is good!

Happens to everyone once in a while haha :muscle: