How can I handle mouseover mouseout events with a single data-action?

[hotwired]

How can I handle mouseover mouseout events with a single data-action?

[sstephenson]

First, make sure JavaScript is the appropriate tool for the job. Can you do what you want with CSS instead?

If you decide you do want to use Stimulus, you can specify multiple actions in the same data-action attribute by separating them with a space:

<div data-action="mouseover->monkey#mouseOver mouseout->monkey#mouseOut">

Note that mouseOver and mouseOut are poor choices for your action method names. Repeating the event name won’t help a reader of the HTML understand what will happen when you mouse over or out of the element. Name your action methods by what will happen, not what triggers them.

[descovi]

CSS in my case was the best solution but I was curious 😄
Thanks for the suggestion and advise! 🎉