34

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

2
  • They might have used JavaScript
    – Andrew
    Aug 4, 2013 at 22:18
  • so How ? :( can you make a jsfiddle sample ? Aug 4, 2013 at 23:34

16 Answers 16

118

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

<div onclick="">Click Me!</div>
2
  • 1
    This works for one of my case, another one still not works, I guess there still something need to be clarified.
    – bard
    Sep 2, 2016 at 19:06
  • 1
    October 2019, this still works. I can't believe such a simple thing fixes the problem. Does anyone have clear explanation why it is work?
    – alpay
    Oct 11, 2019 at 11:28
51

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;
}
5
  • This seems the best solution instead of adding a onClick to the element
    – Neekey
    Jan 23, 2017 at 1:17
  • trivial solution, but works! meseems iOS has a lot in the style of "if it seems to be hoverable/clickable, treat it like that".
    – benzkji
    Jul 8, 2017 at 5:44
  • 1
    This would be an ideal solution, except that it does not seem to work on iPad on iOS 11.
    – Meshaal
    May 27, 2018 at 0:12
  • Funny you'd have to do so even on <a> tags
    – yairniz
    Dec 23, 2018 at 12:30
  • 1
    is it really worked for you? I have the same problem but after touch, the hover state will stuck to the element
    – Rafe
    Dec 27, 2020 at 16:03
27

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>
2
  • I am finding this crashes safari when you use long-click on the buggy iOS 9.1 ... which 0.4% of our users are still on
    – Ruskin
    Mar 22, 2017 at 11:14
  • 1
    @Ruskin 'only', our percentage is higher and it's a year after your comment! ):
    – brandito
    Mar 28, 2019 at 5:29
16

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();
2
  • Neatest, most compliant solution here imo.
    – Boz
    Aug 9, 2015 at 12:07
  • This works great for me. Just tested it on iPhone. Thanks.
    – KLL
    Nov 3, 2017 at 13:04
14

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.

4
  • ontouchmove worked for me - do i need tabIndex too? Dec 2, 2019 at 22:00
  • 2
    No, you can choose. TabIndex is the only one that works when Javacript is disabled.
    – Janghou
    Dec 9, 2019 at 12:44
  • The tabindex attribute is the standard way to make otherwise unresponsive HTML elements :focus-able and :hover-able. This should be the recommended answer.
    – Rounin
    Apr 24, 2022 at 17:07
  • Thanks for this one. All of the above fixes didnt fully work on my iPad. With this version can also unhover items .. very weird behaviour otherwise. Damn iOS!
    – Andy
    Apr 21 at 7:28
5

Here is a basic, successful use of javascript hover on ios that I made:

Note: I used jQuery, which is hopefully ok for you.

JavaScript:

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS:

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

HTML:

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
5
  • Could you please edit this fiddle with your solution ? jsfiddle.net/smmCW/1 - sorry for being newbie ... :"( Aug 5, 2013 at 19:30
  • and it is the exact same code that is in the jsfiddle and above. if you are going to use the example, don't forget to import jquery with: <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> or something similar
    – Andrew
    Aug 6, 2013 at 22:16
  • And I never updated the question with the new jsfiddle example.
    – Andrew
    Aug 7, 2013 at 0:24
  • No :( I have a mistake maybe ? :( Aug 7, 2013 at 22:08
  • 2
    I feel like this shouldn't be the accepted answer because the question is about CSS hover, and this solution is pure JavaScript.
    – WackGet
    May 13, 2019 at 14:19
5

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

0
4

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

2

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.

0
2

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

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.

1
  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?

0

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

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
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

Fixed iOS touch code:

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

0

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

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/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.