JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<script src="https://raw.github.com/dperini/nwmatcher/master/src/nwmatcher.js"></script>
<a id="foo" href="#">hoverme</a>

CSS

a:hover {
    color: #bada55;
}

JavaScript

document.addEventListener('mouseover', function(e) {
    if (/^a$/i.test(e.target.nodeName)) {
      e.target.ownerDocument.hoverElement = e.target;
    }
}, true);

document.addEventListener('mouseout', function(e) {
    if (/^a$/i.test(e.target.nodeName)) {
      e.target.ownerDocument.hoverElement = null;
    }
}, true);

$('#foo').mouseover(function() {
    var select = NW.Dom.select('a:hover');
    // Hovered element found with qsa, but fails in non-qsa browsers
    console.log( 'select: ', select, select[0] === this );

    // This fails in all browsers (doesn't use matchesSelector)
    console.log( 'match: ', NW.Dom.match( this, ':hover' ) );

    // document.hoverElement is not a thing
    // http://plugins.jquery.com/files/JQuery.moreSelectors.js_0.txt
    //   has an old implementation
    console.log( document.hoverElement );
});