JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<h1>
    <code>:hover</code> in iOS.
</h1>
<div id="output"></div>
<div id="box-1" class="box">
    <p>
        This element has event listeners attached to it.
    </p>
    <p>
        If an element has 1 or more DOM event listeners 
        attached to it <code>:hover</code> is applied to 
        the element, in iOS, when <em>any</em> of the events 
        being listened for are fired.
    </p>
    <p>
        This doesn't seem to be caused by jQuery, 
        because similar 
        <a href="http://jsfiddle.net/wrumsby/eUvRq/show/">tests using YUI</a>
        and
        <a href="http://jsfiddle.net/wrumsby/jhTVs/show/">Vanilla JS</a>
        behave the same way.
    </p>
</div>
<div id="box-2" class="box">
    <p>
        This box does <em>not</em> have event listeners attached to it.
    </p>
    <p>
        Having no event listeners doesn't trigger
        <code>:hover</code> in iOS.
    </p>
</div>

CSS

body {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #333;
}

#output {
    position: absolute;
    left: 340px;
}

.box {
    margin: 4px;
    padding: 8px;
    height: 300px;
    width: 300px;
    background-color: #f00;
    color: #000;
    font-size: 12px;
}

.box p {
    margin-bottom: 1em;
}

.box a {
    color: #000;
}

.box:hover {
    background-color: blue;
    color: #fff;
}

.box:hover a {
    color: #fff;
}

.timestamp {
    font-size: 10px;
}

JavaScript

(function() {
    'use strict';
    
    function log(e) {
        var output = $('#output'),
            html = output.html(),
            msg = e.type;

        html += msg + ' <span class="timestamp">' + (new Date()) + '</span><br>';
        
        output.html(html);
    }
    
    var box = $('#box-1');
    
    box.on('blur', log);
    box.on('click', log);
    box.on('mouseover', log);
    box.on('mouseenter', log);
    box.on('touchstart', log);
}());