JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">hover me</a>

<p class="info">Hover effects <span class="enabled">enabled</span> <span class="disabled">disabled</span></p>

CSS

a { color: grey; font-size: 40px; }
body.hasHover a:hover { color: blue; }

/* helpers for this example */
.enabled { display: none; }
body.hasHover .enabled { display: inline; }

.disabled { display: inline; }
body.hasHover .disabled { display: none; }

JavaScript

function watchForHover() {
    var hasHoverClass = false;
    var container = document.body;
    var lastTouchTime = 0;

    function enableHover() {
        // filter emulated events coming from touch events
        if (new Date() - lastTouchTime < 500) return;
        if (hasHoverClass) return;

        container.className += ' hasHover';
        hasHoverClass = true;
    }

    function disableHover() {
        if (!hasHoverClass) return;

        container.className = container.className.replace(' hasHover', '');
        hasHoverClass = false;
    }

    function updateLastTouchTime() {
        lastTouchTime = new Date();
    }

    document.addEventListener('touchstart', updateLastTouchTime, true);
    document.addEventListener('touchstart', disableHover, true);
    document.addEventListener('mousemove', enableHover, true);

    enableHover();
}

watchForHover();