onmouseover e onmouseout

Olá pessoal. Como adicionar os eventos onmouseover e onmouseout no código abaixo? Estou tentando parar o slide ao colocar o cursor sobre a imagem e ao tirar o cursor da imagem voltar a funcionar normalmente.

<style> #boxPrincipal { max-width: 1024px. width: 100%. height: 100px. margin: auto. padding: 0px. text-align: center. background-color: #FFA. border: 1px solid blue. } #box1 { width: 100%. max-width: 190px. height: 60px. /* position: relative. */ bottom: 0. } #imgtete { /* position: absolute. */ bottom: 0. width: 100%. height: 100%. opacity: 0. transition: opacity 800ms. } #imgtete.selected { opacity: 1. }
</style>... <div id="boxPrincipal"> <div id="box1"> <a href="link1"> <img src="slide1.png" id="imgtete"> </a> <a href="link2"> <img src="slide2.png" id="imgtete"> </a> <a href="link3"> <img src="slide3.png" id="imgtete"> </a> <a href="link4"> <img src="slide4.png" id="imgtete"> </a> </div> </div>... <script> contador = 0, images = document.querySelectorAll("#imgtete") quantidade = images.length. //quantidade = 4. let rrr. rrr = setInterval(function () { images[contador].classList.remove("selected") contador++ if(contador >= quantidade) contador = 0 // volta para o começo images[contador].classList.add("selected"). }, 1000). // clearInterval(rrr). </script>