JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.dev.js"></script>
<div id="main">This is a test</div>

CSS

#main {
    background: rgba(0,0,0,.2);
    transition: all 300ms ease-in;
}
#main:hover {
    background: rgba(0,0,0,.6);
}

JavaScript

var transitionend = (function(transition) {
     var transEndEventNames = {
         'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
         'MozTransition'    : 'transitionend',      // only for FF < 15
         'transition'       : 'transitionend'       // IE10, Opera, Chrome, FF 15+, Saf 7+
    };

    return transEndEventNames[transition];
})(Modernizr.prefixed('transition'));

// then
var transitionProperty = 'background-color',
    startColor = jQuery("#main").on(transitionend, function(e) {
        var el = $(this);
        if ( transitionProperty === e.originalEvent.propertyName && el.css(transitionProperty) !== startColor ) {
            console.log("POUM!");
            // This is to make it only happen once.
            $(this).off(transitionend);
        }
    }).css(transitionProperty);