setInterval() stop with mouse Hover

Question

I am creating a JS to run the code as if it were slides.

    <div class="uk-panel uk-panel-box tm-mandato uk-hidden-small widget_recent_entries">
        <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
            <div class="tm-imagem uk-height-1-1">
                ...
            </div>
        </div>
        <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
            <div class="tm-imagem uk-height-1-1">
                ...
            </div>
        </div>
    </div>

I made two JS in an attempt to make the slides pass automatically (every 5s) and stop the automatic execution with the mouse’s Hover (it can be in the .tm-mandate class or in the .uk-overlay-Hover). Either way, both codes run automatically, but do not stop running when you have the Hover.

Code 1:

    var timer;
function startTimer() {
    timer = setInterval(function () {
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, 5000);
}
jQuery(document).ready(function($){
    $('tm-mandato .uk-overlay-hover').hover(function (ev) {
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});
startTimer();

Code 2

    jQuery(document).ready(function($){
    var timer = 5000;
    $('.tm-mandato > .uk-overlay-hover').mouseenter(function(ev){
        clearInterval(timer);
    }, setInterval (function(ev){ 
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, timer));
});

How can I resolve this issue of the Hover?

Answer 1

Considering the first code, the selector is wrong missing a point . in class tm-mandato in $('tm-mandato .uk-overlay-hover').hover(....

But just use only the class of the main div, exactly the .tm-mandato:

$('.tm-mandato').hover(...

Or just the other:

$('.uk-overlay-hover').hover(...

Or both since one is the other’s daughter:

$('.tm-mandato .uk-overlay-hover').hover(...

In the case here only used in the first:

var timer;
function startTimer() {
    timer = setInterval(function () {
       console.log("rodando");
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, 1000);
}
jQuery(document).ready(function($){
    $('.tm-mandato').hover(function (ev) {
       console.log("parou");
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});
startTimer();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uk-panel uk-panel-box tm-mandato uk-hidden-small widget_recent_entries">
     <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
         <div class="tm-imagem uk-height-1-1">
             passe o mouse para parar
         </div>
     </div>
     <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
         <div class="tm-imagem uk-height-1-1">
             passe o mouse para parar
         </div>
     </div>
 </div>