Fix CSS hover on iPhone iPad iPod

Question

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     lt div class  mm  gt hello world lt  div gt    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

User · Accepted Answer

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    lt div class  mm  gt hello world lt  div gt   lt p gt this will disappear on hover of hello world lt  p gt

User · Answer

Add a tabIndex attribute to the body    lt body tabIndex 0  gt    This is the only solution that also works when Javascript is disabled   Add ontouchmove to the html element    lt html lang en ontouchmove  gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In response to Dan  https   stackoverflow com a 20048559 4298604   I would recommend a slightly altered version    x000D   x000D   lt div onclick  void 0   gt Click Me  lt  div gt  x000D   x000D   x000D    Adding  void 0   helps to obtain the undefined primitive value  as opposed to

User · Answer

Add onclick    to anything you wish iOS to recognise as an element with a hover     lt div onclick    gt Click Me  lt  div gt

User · Answer

The onclick    was very temperamental when I attempted using it    Using  active css for tap events  just place this into your header     lt script gt      document addEventListener  touchstart   function      false    lt  script gt

User · Answer

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   lt td onclick    gt     object COUNTRY     lt  td gt       lt td onclick    gt     object PoD     lt  td gt       lt td onclick    gt     object BALANCE     lt  td gt       lt td onclick    gt     object DATE     lt  td gt             table appendChild tr

User · Answer

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

User · Answer

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

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

Examples related to ios

Examples related to css

Examples related to hover

Examples related to touch