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 sam

Solution 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 clicksint 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.Buttonbtn1= (Button) findViewById(R.id.button1);
        // Setting OnClickListener on btn1
        btn1.setOnClickListener(newOnClickListener() {
            @OverridepublicvoidonClick(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();
        }
    });

Solution 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"inwindow;

// 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");

    functionmenuClick(e) {
        // if click isn't wanted, prevent itvar element = jQuery(this);

        var noclick = element.attr('dataNoclick');
        noclick = (noclick === 'true' ? 'false' : 'true');
        // reset flag on all linksfor (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-itema:hover,
li.menu-itema.hover {
    /* Same code goes here for hover pseudo code and hover class */
}

Hope this will be a help to somebody.