[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

This question is related to ios css hover touch

The answer is


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.


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

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

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".


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

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/


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.


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

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

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

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.


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>

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

Original code:

_x000D_
_x000D_
#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_
}
_x000D_
_x000D_
_x000D_

Fixed iOS touch code:

_x000D_
_x000D_
#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_
}
_x000D_
_x000D_
_x000D_


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

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

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


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

Examples related to ios

Adding a UISegmentedControl to UITableView Crop image to specified size and picture location Undefined Symbols error when integrating Apptentive iOS SDK via Cocoapods Keep placeholder text in UITextField on input in IOS Accessing AppDelegate from framework? Autoresize View When SubViews are Added Warp \ bend effect on a UIView? Speech input for visually impaired users without the need to tap the screen make UITableViewCell selectable only while editing Xcode 12, building for iOS Simulator, but linking in object file built for iOS, for architecture arm64

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to hover

Angular 2 Hover event How can I access a hover state in reactjs? CSS disable hover effect How to remove/ignore :hover css style on touch devices Spin or rotate an image on hover How to make in CSS an overlay over an image? How to display and hide a div with CSS? simple Jquery hover enlarge Changing image on hover with CSS/HTML CSS On hover show another element

Examples related to touch

Consider marking event handler as 'passive' to make the page more responsive Touch move getting stuck Ignored attempt to cancel a touchmove How to remove/ignore :hover css style on touch devices Fix CSS hover on iPhone/iPad/iPod How to prevent sticky hover effects for buttons on touch devices Draw in Canvas by finger, Android Disable scrolling when touch moving certain element How to implement swipe gestures for mobile devices? Prevent Android activity dialog from closing on outside touch Media query to detect if device is touchscreen