How to Simulate a Hover With a Touch in Touch Enabled Browsers

How do I simulate a hover with a touch in touch enabled browsers?

OK, I've worked it out! It involves changing the CSS slightly and adding some JS.

Using jQuery to make it easy:

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

In english: when you start or end a touch, turn the class hover_effect on or off.

Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

element:hover {
    rule:properties;
}

with

element:hover, element.hover_effect {
    rule:properties;
}

And just for added usefulness, add this to your CSS as well:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

To stop the browser asking you to copy/save/select the image or whatever.

Easy!

How to simulate hover effect on touch devices?

try this

$('#arm').bind('touchstart', function() {
        $(this).removeAttr('style').css('bottom','244px');
        $(this).addClass('hover_effect');
});

$('#arm').bind('touchend', function() {
        $(this).removeClass('hover_effect');
});

similarly for $('#man').

hover event on touch device

On touch devices, hover is not supported. You can either:

• skip hover effects in touch device stylesheets

• use JavaScript to turn hover into click interactions

• use JavaScript to simulate hover interactions on the touch device

There are multiple other posts on SO that discuss about this problem:

How do I simulate a hover with a touch in touch enabled browsers?

how to deal with hover effect on touch devices

Hover for Touch Devices

Firefox RDM Touch Simulation doesn't simulate hover?

As you said, :hover :focus :active are pseudo-classes, according to this link from mozilla :hover matches when the user interacts with an element with a pointing device and problematic on touchscreens. We can achieve same effect :hover does in touchscreen using :active pseudo-class. Or combination of both.

As you said simulation of touch for :hover class is not working in Firefox. There is no promise to support it in future. Touch and pointing device worked in a very different way so its better not to use :hover that need the position of pointer to activate. On the other hand touch screen have no record of position before touch, so :focus :active are better alternative.

I will be happy if it does any help to you. Thanks.

Detecting hover or mouseover on smartphone browser

TL;DR; touchmove, touchstart and touchend are the events that made this possible.

I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.

But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.

So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.

E.g

var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;

And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.

Here's the CodePen to try it easier on mobile touch devices. (Please note this only works on touch devices, you can still use chrome on toggled device mode)

And this is my final code,

var $startElem, startY;
function updateInfo(char) {  $('#info').html('Hover is now on "' + char + '"');}
$(function() {  var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');  for (var i = 0; i < strArr.length; i++) {    var $btn = $('<a />').attr({        'href': '#',        'class': 'btn btn-xs'      })      .text(strArr[i].toUpperCase())      .on('touchstart', function(ev) {        $startElem = $(this);        var touch = ev.originalEvent.changedTouches[0];        startY = touch.clientY;        updateInfo($(this).text());      })      .on('touchend', function(ev) {        $startElem = null;        startY = null;      })      .on('touchmove', function(ev) {        var touch = ev.originalEvent.changedTouches[0];        var clientY = touch.clientY;
        if ($startElem && startY) {          var totalVerticalOffset = clientY - startY;          var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.
          if (indexOffset > 0) {            $currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);            if ($currentBtn.text()) {              updateInfo($currentBtn.text());            }          } else {            $currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);            if ($currentBtn.text()) {              updateInfo($currentBtn.text());            }          }        }      });
    $('#asb').append($btn);  }});

#info {  border: 1px solid #adadad;  position: fixed;  padding: 20px;  top: 20px;  right: 20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="info">  No hover detected</div><div id="asb" class="btn-group-vertical"></div>

$(document).ready(function() {
    $('p').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});