JSFiddle - React, Tailwind, and code Playground

by Tony C

JavaScript

// Get a list of all img elements on the page
var images = document.querySelectorAll('img');

// Listen to the stream of mouseover events
var mouseOvers = Rx.Observable.fromEvent(images, 'mouseover');

// Listen to the stream of mouseout events
var mouseOuts = Rx.Observable.fromEvent(images, 'mouseout');


// Create an Observable for all mouseOvers
var imageHover = mouseOvers.
    // For each (map) mouseOver event
    map(function(e) { 
        // Wrap the event with an another Observable, so we can throttle it
        return Rx.Observable.return(e.target).     
            // Wait to see if the mouseOver is still on this same boxart
            delay(300). 
            // Don't return anything if a mouseout occurred, this stops the observable from returning anything else
            takeUntil(mouseOuts);                     
    }).
    // Return the last throttled event
    switchLatest();                                    


// Subscribe to the img hovers
imageHover.subscribe(function(x) {
    console.log('Mouse over image with alt tag: ' + x.alt);
});