Alterne la clase en la lista li una por una al usar el evento mouseover en JavaScript.
const list = document.querySelectorAll("ul li"); let selectedEl; for (const el of list) { el.addEventListener("mouseover", e => { selectedEl && selectedEl.classList.remove("active"); selectedEl = e.target; e.target.classList.add("active"); }); } *{ padding:0; margin:0; } .container{ height:100vh; display:flex; justify-content:center; align-items:center; background-color:#eee; } .card{ height:400px; width:330px; background-color:#fff; border-radius:10px; box-shadow:0px 15px 30px rgba(0,0,0,0.1); overflow:hidden; } .card ul{ list-style:none; position:relative; cursor:pointer; } .card ul li{ position:absolute; width:320px; height:300px; display:flex; align-items:center; justify-content:center; display:none; } .card ul li.active{ display:block !important; } .card ul li img{ height:100%; width:100%; object-fit:cover; } <div class="container"> <div class="card"> <ul id="list-row"> <li class="active"><img src="https://i.imgur.com/dzyiJS2.jpg"></li> <li><img src="https://i.imgur.com/7BwBYPB.jpg"></li> <li><img src="https://i.imgur.com/HjkIPFZ.jpg"></li> </ul> </div> </div>De hecho, quiero cambiar la imagen una por una de la lista y agregar una clase activa al elemento de la lista cuando paso el mouse sobre la imagen. Y debería cambiar después de 2-3 segundos de intervalo. Será lo mismo que un carrusel.
//arr of path of images const imgArr = ['./imglocation1', 'imglocation2', 'imglocation3', ...] const imgContainer = document.getElementById("imgCon"); //onHover run changeImg() function imgContainer.addEventListener("mouseenter", function(event) { changeImg() }, false); function changeImg() { //set arrays first path imgContainer.src = imgArr[0]; //wait for 3 sec to change(3000 millisec = 3 sec) setTimeout(() => { //set arrays second path imgContainer.src = imgArr[1]; //wait another 3 sec setTimeout(() => { //set arrays third path imgContainer.src = imgArr[2]; //loop changing img again changeImg() }, 3000) }, 3000) } #imgCon { position: absolute; top: 0%; width: 100%; height: 35%; } <img id="imgCon" src="" />