JSFiddle - React, Tailwind, and code Playground

by Brian Blakely

HTML

<h1>Draft <code>:hover</code> Detection</h1>

<p>Open your console, please!  Then refresh!  Then mouseover the "Result" panel.</p>

<p>In this case, the only detection is <em>deferred</em> detection.  You cannot detect :hover without a human.  We minimize this flaw by firing the detection as soon as a mouse-owning user moves the cursor.</p>

<p>This works, if not as seamlessly as some other tests.</p>

CSS

h1 {
    font-size: larger;
}
p {
    margin: 15px;
}
em {
    font-style: italic;
}

JavaScript

var elRoot = document.documentElement,
    elStyle = document.createElement('style');

elStyle.innerHTML = 'html:hover { clear: both; }';
elRoot.getElementsByTagName('head')[0].appendChild(elStyle);

function detectHover() {
    elRoot.removeEventListener('mousemove', detectHover, false); // The event is gone after the first mousemove!!
    if(elRoot.currentStyle) {
        var rootHoverStyle = elRoot.currentStyle.clear;
    } else {
        var rootHoverStyle = document.defaultView.getComputedStyle(elRoot,null).getPropertyValue('clear');
    }
    
    // IF THIS IS TRUE YOU HAVE SOME HOVER
    console.log(rootHoverStyle === 'both');
    
    elStyle.parentNode.removeChild(elStyle);
}

elRoot.addEventListener('mousemove', detectHover, false);