Question

I have a div in which are div, img, a, h3, input elements. They dynamically changing (carousel). So i need to stop setInterval which provides this changes on hover, but it doesn’t work (hover event doesn’t fire).

jQuery('div.slider').on('hover', 'div, img, a, h3, input',
//Tried jQuery('body').on('hover', 'div.slider'...
//Alsro tried on('focusin focusout')
    function(event){
        console.log('on');
        if(event.type === 'focusin'){
            console.log(event.type);
            stopCarousel();
        }
        else if(event.type === 'focusout'){
            console.log(event.type);
            startCarousel();
        }
    }
);

Where is the problem?

Answer 1

.hover(), is a function not an event, and it uses mouseenter and mouseleave so it most certainly will not have a type that matches focusin or focusout. I’d just do:

$('div.slider').on({
    mouseenter: function() {
        stopCarousel();
    },
    mouseleave: function() {
        startCarousel();
   }
}, 'div, img, a, h3, input');