Stop and resume loop not working - mouseover/mouseout

Question

I wrote a script that changes the picture every 1 second.

But I have a problem, the loop does not stop when hovering and leaving the mouse on the child_block.

That is, when you hover the mouse over the picture, the pictures should stop changing. And when the mouse moves away from the picture, the pictures should change again.

How to fix this problem?

I have marked problem areas in the code with comments.

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');

let images = document.createElement('img');              
images.className = 'img_s';
child_block.prepend(images);

const colors = [                 
{name: 'https://i.ibb.co/JkTVvVP/1.png', interval: 1000},
{name: 'https://i.ibb.co/GPZRcL4/2.jpg', interval: 1000},
{name: 'https://i.ibb.co/9wdcLz8/3.png', interval: 1000},
]

let count =0;   

function change(){  

if(count === colors.length){     
count = 0;  
}

images.src = colors[count].name;
  
cycle = setTimeout(change, colors[count].interval);
count = count + 1;
}


let cycle = setTimeout(change,1000);

main.addEventListener('mouseover', function(e){  // ******** loop stop not working =( ********
let child = e.target.className;

if(child == 'child_block'){
clearTimeout(cycle);
}       
})


 main.addEventListener('mouseout', function(e){  // ******** loop restart doesn't work either =( ********
let child = e.target.className;

if(child == 'child_block'){
cycle = setTimeout(change, 1000);
}        
})

body{
display:grid;
place-items:center;     
user-select:none;
}


.main_block{
display:grid;
place-items:center; 
border:1px solid black;
width: 50%;
height:500px;
margin:50px;
}

.img_s{
width:100%;
height:100%;    
border:1px solid black;
z-index:-1;
}

.child_block{
border:1px solid red;
width:50%;
height:80%;
z-index:1;      
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>

Answer 1

The Following Behaviour Happens Because The event.target returns the innermost child element which is being hovered/clicked on. In your case since the parent div child_block has comparatively less space left out than img_s so even when you hover over most of the times the target will be img_s and not child_block So you need to check if either img_s or child_block has been hovered over or not for this program to work.

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');

let images = document.createElement('img');              
images.className = 'img_s';
child_block.prepend(images);

const colors = [                 
{name: 'https://i.ibb.co/JkTVvVP/1.png', interval: 1000},
{name: 'https://i.ibb.co/GPZRcL4/2.jpg', interval: 1000},
{name: 'https://i.ibb.co/9wdcLz8/3.png', interval: 1000},
]

let count =0;   

function change(){  

if(count === colors.length){     
count = 0;  
}

images.src = colors[count].name;
  
cycle = setTimeout(change, colors[count].interval);
count = count + 1;
}


let cycle = setTimeout(change,1000);

main.addEventListener('mouseover', function(e){  // ******** loop stop not working =( ********
let child = e.target.className;

if(child == 'child_block' || child == 'img_s'){
clearTimeout(cycle);
}       
})


 main.addEventListener('mouseout', function(e){  // ******** loop restart doesn't work either =( ********
let child = e.target.className;

if(child == 'child_block' || child == 'img_s'){
cycle = setTimeout(change, 1000);
}        
})

body{
display:grid;
place-items:center;     
user-select:none;
}


.main_block{
display:grid;
place-items:center; 
border:1px solid black;
width: 50%;
height:500px;
margin:50px;
}

.img_s{
width:100%;
height:100%;    
border:1px solid black;
z-index:-1;
}

.child_block{
border:1px solid red;
width:50%;
height:80%;
z-index:1;      
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>