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

[descovi]

Hi, if I put two data-action on same HTML node, first one is not recognized.
For handle a mouseover mouseout event I need to build two different nodes.
Is there another way?

This code work but I don't know if is the best solution:

<div data-controller='monkey' >
  <div data-action='mouseover-monkey#mouseOver'>
    <div data-action='mouseout-monkey#mouseOut'>
      <img src="imageOver.png" ></img>
    </div>
  </div>
</div>

Thanks!

[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! 🎉