在iPhone和Android CSS悬停状态 [英] CSS hover state on iPhone and Android

问题描述

在移动设备上，我想用CSS悬停状态。

On mobile device, I want to use CSS hover state.

我发现，在iPhone / iPad上，用户首先点击结果悬停状态和第二自来水生产click事件。

I found that on iPhone/iPad, users' first tap results hover state and second tap produces click event.

这是完美的。

我想在Android上是相同的。

I want the same on Android.

首先水龙头 - 悬停状态
第二水龙头 - 点击事件

First tap - hover state Second tap - click event

感谢您提前。

推荐答案

我找到了解决办法。

它的工作原理完全一样在Android作为iPhone / iPad的。

It works exactly the same on Android as on iPhone/iPad.

var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;

// but we don't want to run this code on iOS5+
if (document.querySelectorAll && !iOS5) {
    var i, el,
        dropdowns = document.querySelectorAll("li.menu-item > a");

    function menuClick(e) {
        // if click isn't wanted, prevent it
        var element = jQuery(this);

        var noclick = element.attr('dataNoclick');
        noclick = (noclick === 'true' ? 'false' : 'true');
        // reset flag on all links
        for (i = 0; i < dropdowns.length; i++) {
            el = jQuery(dropdowns[i]);
            el.attr('dataNoclick', 'false');
        }

        // set new flag value and focus on dropdown menu
        element.attr('dataNoclick', noclick);
        if (noclick === 'true') {
            e.preventDefault(); 
            for (i = 0; i < dropdowns.length; i++) {
                el = jQuery(dropdowns[i]);
                el.removeClass('hover');
            }

    if(noclick) element.removeClass('hover');
    else element.addClass('hover');
    }
    }

    for (i = 0; i < dropdowns.length; i++) {
        el = jQuery(dropdowns[i]);
        el.attr('dataNoclick', 'false');
        el.click(menuClick);
    }
}

悬停类定义为如下。

li.menu-item a:hover,
li.menu-item a.hover {
    /* Same code goes here for hover pseudo code and hover class */
}

希望这将是一个人的帮助。

Hope this will be a help to somebody.

这篇关于在iPhone和Android CSS悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！