CSS hover state on iPhone and Android

问题

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

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

It's perfect.

I want the same on Android.

First tap - hover state Second tap - click event

Thank you in advance.

回答1:

Add GestureDetector.SimpleOnGestureListener for the view to detect single tap and double tap and use method onSingleTapConfirmed() for hover state and onDoubleTap() for click event.

Or you can use a count when tap detected and do different methods for each count.

Declare a variable Globally outside the onCreate method:

//Declaring the variable to count the number of clicks
            int count = 0;

Then in the onCreate method implement the following. Here, we are setting an OnClickListener on a Button:

// Declaring the Button and Type Casting it.
        Button btn1 = (Button) findViewById(R.id.button1);
        // Setting OnClickListener on btn1
        btn1.setOnClickListener(new OnClickListener() {
            @Override
        public void onClick(View v) {
            //Executing the following code on the click
//Incrementing the variable count by 1 on the click of the button
            count++;
//Displaying the count using a Toast Toast.makeText(MainActivity.this,
"The button has been clicked " + count +     " times",Toast.LENGTH_SHORT).show();
        }
    });

回答2:

I found the solution.

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);
    }
}

hover class is defined as followings.

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.

来源：https://stackoverflow.com/questions/22231198/css-hover-state-on-iphone-and-android