Dotykový display a proklatý :hover

CSS pseudo-class selektor :hover se původně, někdy v pravěku, používal pouze pro obarvování odkazů při nejetí kurzorem myši. Postupem času se ale začal "chytat" i na jiné prvky a za jeho využití dnes uděláte třeba elegantně i rozbalovací menu. Tím se můžete těšit ale jen do té doby, než si takovou konstrukci zkontrolujete na tabletu. No jistě - kde je kurzor myši? Jak :hover vyvolat? No, nijak. Prohlížeče v zařízeních s dotykovou obrazovkou buďto :hover vyvolají při ťuknutí jen tak mimochodem, takže menu nebo roletka jen problikne (prohlížeče na Anroidu a Coast na iOS; při troše šikovnosti se dá :hover vyvolat pohybem "stiskni a popotáhni"), nebo je naopak vyvolán pouze :hover a k případnému prokliku nedojde (Safari i Chrome na iOS) - což je mnohem horší!

Řešení? Použití :hover zredukovat pouze na nedůležité kosmetické efekty.

Ale co když už máme něco komplikovanějšího s :hover hotové a úplně to předělat nelze? Našel jsem řešení mimo jiné v textu What's the best way to detect a 'touch screen' device using JavaScript?:

Pomocí jednoduché funkce v js detekujeme dotykovou obrazovku. Nastavíme řídící class, podle kterého upravíme reakci na :hover v CSS. Rozbalení menu či roletky, které reagovalo dříve na :hover, nastane i po přidání classu pomocí další funkce v js (jQuery).

Následující ukázka je i po zjednodušení doufám dostatečně jasná.

JS (jQuery):

function is_touch_device() {
    try {
        return 'ontouchstart' in window
            || 'onmsgesturechange' in window;
    } catch (e) {
        return false;
    }
};

$(document).ready(function(){

    /* touch screen? */

    $('body').toggleClass(function() {
        if ( is_touch_device() ) {
            return 'touch';
        } else {
            return 'desktop';
        }
    });

    /* dropdown switch */

    $('body:not(.desktop) .switch').click(function() {
        var s = $(this).closest('.switch');
        if ( s.is('.open') ) {
            s.removeClass('open');
        } else {
            s.addClass('open');
            return false;
        }
    });
});


CSS:

.switch .dropdown {visibility: hidden;}
.switch.open .dropdown,
body.desktop .switch:hover .dropdown {visibility: visible;}


HTML:

<span class="switch">
    <strong>Title</strong>
    <span class="dropdown">
       ...values...
    </span>
</span>

[touch screen, dotyková obrazovka, dotykový display, hover efekt]