Toggle class in li list one by one in using mouseover event in 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>I actually want to change the image one by one from the list and add an active class to the list item when I hover over the image. And, it should change after 2-3 seconds of interval. It will be the same as a carousel.
//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="" />