Tenho este código e gostaria de quem quando o usuário passasse o mouse por cima pausasse o setTimeout e fosse retomado ao tirar o mouse de cima.
function slide(){
let slides = document.querySelectorAll('.rotate');
slide2 = slides[0];
slide3 = slides[1];
slide4 = slides[2];
slide2.classList.add('slide2');
slide3.classList.add('slide2');
slide4.classList.add('slide2');
setTimeout(function(){
slide3.classList.add('slide3');
slide4.classList.add('slide3');
setTimeout(function(){
slide4.classList.add('slide4');
}, 5000);
}, 5000);
};
div.rotate {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #000;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
transition: 5s linear;
background-color: transparent;
}
.slide2 {
transform: rotate(45deg)!important;
}
.slide3 {
transform: rotate(135deg)!important;
}
.slide4 {
transform: rotate(225deg)!important;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#anima {
color: #fff;
background-color: #171517;
border: none;
padding: 10px 20px;
font-weight: bold;
font-size: 1rem;
text-transform: uppercase;
cursor: pointer;
position: absolute;
margin: auto;
top: 300px;
}
.container_anima {
margin-top: 30px;
position: relative;
width: 205px;
height: 205px;
/* border: 2px solid #000; */
border-radius: 50%;
}
.container_anima_interno {
position: relative;
width: calc(100% - 5px);
height: calc(100% - 5px);
border: 2px solid #cecece;
border-radius: 50%;
top: 0px;
left: 0px;
}
.slides {
position: absolute;
color: #000;
background-color: #fff;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
font-size: 1rem;
text-align: center;
border: 1px solid #000;
border-radius: 50%;
}
.slides:first-of-type {
margin: auto;
left: 0;
right: 0;
top: -15px;
}
.slides:nth-of-type(2) {
margin: auto;
top: 0;
bottom: 0;
right: -15px;
}
.slides:nth-of-type(3) {
margin: auto;
left: 0;
right: 0;
bottom: -15px;
}
.slides:last-of-type {
margin: auto;
top: 0;
bottom: 0;
left: -15px;
}
<div id="container">
<div class="container_anima">
<div class="container_anima_interno"></div>
<div class="rotate" data-slide='1'></div>
<div class="rotate" data-slide='2'></div>
<div class="rotate" data-slide='3'></div>
<div class="rotate" data-slide='4'></div>
<span class="slides">1</span>
<span class="slides">2</span>
<span class="slides">3</span>
<span class="slides">4</span>
</div>
<button id="anima" onclick="slide()">animar</button>
</div>