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