JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://rawgit.com/ractivejs/ractive-transitions-slide/master/ractive-transitions-slide.js"></script>
<p>mouse over the boxes...</p>
<main></main>

<script id='template' type='text/ractive'>
    <div id='outer' on-mouseenter='unshift("log","entered outer")' on-mouseleave='unshift("log","left outer")'>
        <p>outer</p>
        <div id='a' on-mouseenter='unshift("log","entered a")' on-mouseleave='unshift("log","left a")'>a</div>
        <div id='b' on-mouseenter='unshift("log","entered b")' on-mouseleave='unshift("log","left b")'>b</div>
        <div id='c' on-mouseenter='unshift("log","entered c")' on-mouseleave='unshift("log","left c")'>c</div>
    </div>
    
    {{#each log}}
        <p intro='slide'>{{this}}</p>
    {{/each}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

#outer {
    background-color: #eee;
    padding: 1em;
}

#outer p {
    display: inline-block;
    margin: 0 1em 0 0;
}

#a, #b, #c {
    display: inline-block;
    background-color: #d00;
    width: 2em;
    height: 1.5em;
    margin-right: 2em;
    text-align: center;
    color: white;
    line-height: 1;
    padding: 0.5em 0 0 0;
}

JavaScript

Ractive.events.mouseenter = function ( node, fire ) {
    node.addEventListener( 'mouseover', mouseoverHandler, false );
    
    return {
        teardown: function () {
            node.removeEventListener( 'mouseover', mouseoverHandler, false );
        }
    };
    
    function mouseoverHandler ( event ) {
        if ( !node.contains( event.relatedTarget ) ) {
            fire({ node: node, original: event });
        }
    }
};

Ractive.events.mouseleave = function ( node, fire ) {
    node.addEventListener( 'mouseout', mouseoutHandler, false );
    
    return {
        teardown: function () {
            node.removeEventListener( 'mouseout', mouseoutHandler, false );
        }
    };
    
    function mouseoutHandler ( event ) {
        if ( !node.contains( event.relatedTarget ) ) {
            fire({ node: node, original: event });
        }
    }
};

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: { log: [] }
});