question js

Salut
Je m'entraîne pendant les vacances en js pour "m'améliorer" et je rencontre un petit problème sur l'un de mes test.
En gros, j'ai une div qui, quand je passe dessus, prend la classe .hiden


let mydiv =document.querySelector(".step")
mydiv.addEventListener(
"mouseover", function(){
mydiv.classList.toggle("hidenn")
}

)


Tout fonctionne mais je voudrais que en sortant ma souris de la div, la classe se retire et du coup que ma div revienne à son état d'origine.

Je pensais utiliser une méthode qui semble bien dégeulasse (Faire un addEventListener sur le body qui stipule que quand je passe ma souris dessus (donc en gros ailleurs que sur la div) Cela retire la classe ajoutée préalablement sur ma div.)

Voilà, si vous avez des pistes, n'hésitez pas !

https://jsfiddle.net/urdadgey/470gj2uz/3/