[ios] Fix CSS hover on iPhone/iPad/iPod

I want to fix the hover effect on iOS ( change to touch event ) but I dont have any idea . Let me explain this . You have a text in your page :

<div class="mm">hello world</div>

With style :

.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }

Ok , in dekstop if you put your mouse over the text you get a #ddd background , right ? But in iOS if you touch the text you get nothing but if you tap it it gets a ugly and sticky #ddd background which is not nice and I want the user get the hover effect when he touch that text ( something like touchevent I think ) . But I see some websites fixed that like freemyappps.com or ( please check this site ->D4F on your ios device and touch something to see the hover effect like eating a cake :) ) But how these sites fixed that ? How can fix like them ? Thanks

I know it's an old post, already answered, but I found another solution without adding css classes or doing too much javascript than really needed, and I want to share it, hoping can help someone.

I found that to enable :hover effect on every kind of elements on a Touch enabled browser, you need to tell him that your elements are clickable. To do so you can simply add an empty handler to the click function with jQuery or javascript.

$('.need-hover').on('click', function(){ });

It's better if you do so only on Mobile enabled browsers with this snippet:

// check for css :hover supports and save in a variable
var supportsTouch = (typeof Touch == "object");

if(supportsTouch){ 
    // not supports :hover
    $('.need-hover').on('click', function(){ });
}

Where, I solved this problem by adding the visibility attribute to the CSS code, it works on my website

Original code:

#zo2-body-wrap .introText .images:before_x000D_
{_x000D_
background:rgba(136,136,136,0.7);_x000D_
width:100%;_x000D_
height:100%;_x000D_
content:"";_x000D_
position:absolute;_x000D_
top:0;_x000D_
opacity:0;_x000D_
transition:all 0.2s ease-in-out 0s;_x000D_
}

Fixed iOS touch code:

#zo2-body-wrap .introText .images:before_x000D_
{_x000D_
background:rgba(136,136,136,0.7);_x000D_
width:100%;_x000D_
height:100%;_x000D_
content:"";_x000D_
position:absolute;_x000D_
top:0;_x000D_
visibility:hidden;_x000D_
opacity:0;_x000D_
transition:all 0.2s ease-in-out 0s;_x000D_
}

1. Assigning an event listener to the target element seems to work. (Works with 'click', at least.) CSS hover on ios works only if an event listener is assigned

2. Wrapping the target element in an a[href=trivial] also seems to work. https://stackoverflow.com/a/28792519/1378390

A related note/diagram on mobile Safari's algorithm for handling clicks and other events is here: Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

I successfully used

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);

which was documented on http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm

so a variation of Andrew M answer.

I know that the question is old but still relevant.

The only solution that I've found that works is using @media query like this:

@media (hover) { my-class:hover {
  //properties
 }
}

My reference: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

Some people don't know about this. You can apply it on div:hover and working on iPhone .

Add the following css to the element with :hover effect

.mm {
    cursor: pointer;
}

In response to Dan (https://stackoverflow.com/a/20048559/4298604), I would recommend a slightly altered version.

<div onclick="void(0)">Click Me!</div>

Adding "void(0)" helps to obtain the undefined primitive value, as opposed to "".

On some sites I need to use css "cursor:help". Only iOS it gave me a lot of irritation. To solve this, change everything af the page to "cursor:pointer". That works for me.

jQuery:

if (/iP(hone|od|ad)/.test(navigator.platform)) {
$("*").css({"cursor":"pointer"});
}

I"m not sure if this will have a huge impact on performance but this has done the trick for me in the past:

var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();

Here is a very slight improvement to user1387483's answer using an immediate function:

(function() {
  $("*").on( 'touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;

Also, I agree with Boz that this appears to be the "neatest, most compliant solution".

The hover pseudo class only functions on iOS when applied to a link tag. They do that because there is no hover on a touch device reall. It acts more like the active class. So they can't have one unless its a link going somewhere for usability reasons. Change your div to a link tag and you will have no problem.

Old Post I know however I successfully used onlclick="" when populating a table with JSON data. Tried many other options / scripts etc before, nothing worked. Will attempt this approach elsewhere. Thanks @Dan Morris .. from 2013!

     function append_json(data) {
     var table=document.getElementById('gable');
     data.forEach(function(object) {
         var tr=document.createElement('tr');
         tr.innerHTML='<td onclick="">' + object.COUNTRY + '</td>' + '<td onclick="">' + object.PoD + '</td>' + '<td onclick="">' + object.BALANCE + '</td>' + '<td onclick="">' + object.DATE + '</td>';
         table.appendChild(tr);
     }
     );

The onclick="" was very temperamental when I attempted using it.

Using :active css for tap events; just place this into your header:

<script>
    document.addEventListener("touchstart", function() {},false);
</script>

Add a tabIndex attribute to the body:

<body tabIndex=0 >

This is the only solution that also works when Javascript is disabled.

Add ontouchmove to the html element:

<html lang=en ontouchmove >

For examples and remarks see this blogpost:

Confirmed on iOS 13.

These solutions have the advantage that the hovered state disappears when you click somewhere else. Also no extra code needed in the source.

Add onclick="" to anything you wish iOS to recognise as an element with a hover.

<div onclick="">Click Me!</div>