Note: This answer was for a previous version of this question where the question asker was trying to use JavaScript to apply css styles… which can simply be done with CSS.
css
-only solution.For applying basic styles, CSS is simpler and more performant that JS solutions 99% of the time. (Though more modern CSS-in-JS solutions — eg. React Components, etc — are arguably more maintainable.)
Run this code snippet to see it in action…
.hover-button .hover-button--on,_x000D_
.hover-button:hover .hover-button--off {_x000D_
display: none;_x000D_
}_x000D_
_x000D_
.hover-button:hover .hover-button--on {_x000D_
display: inline;_x000D_
}
_x000D_
<button class='hover-button'>_x000D_
<span class='hover-button--off'>Default</span>_x000D_
<span class='hover-button--on'>Hover!</span>_x000D_
</button>
_x000D_