How to remove ignore hover css style on touch devices

Question

I want to ignore all  hover CSS declarations if a user visits our website via touch device  Because the  hover CSS does not make sense  and it can even be disturbing if a tablet triggers it on click tap because then it might stick until the element loses focus  To be honest  I don t know why touch devices feel the need to trigger  hover in first place - but this is reality  so this problem is reality as well   a hover      color blue     border-color green        etc   gt  ignore all at once for touch devices     So   how  can I remove ignore all CSS  hover declarations at once  without having to know each one  for touch devices after having them declared

User · Answer

try this    media  hover  lt s gt on-demand lt  s gt         button hover           background-color   color-when-NOT-touch-device            UPDATE  unfortunately W3C has removed this property from the specs  https   github com w3c csswg-drafts commit 2078b46218f7462735bb0b5107c9a3e84fb4c4b1

User · Answer

Try this  i use background and background-color in this example    var ClickEventType     document ontouchstart     null     click     touchstart     if  ClickEventType     touchstart                    a   each function        save original                   var back color     this  css  background-color                    var background     this  css  background                      this  attr  data-back color   back color                     this  attr  data-background   background                                   a   on  touchend   function e       overwrite with original style                   var background     this  attr  data-background                    var back color     this  attr  data-back color                    if  back color    undefined                          this  css   background-color   back color                                      if  background    undefined                          this  css   background   background                                     on  touchstart   function e       clear added stlye    elements                     this  css   background        background-color                             css   a       -webkit-touch-callout  none      -webkit-tap-highlight-color  transparent      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none

User · Answer

This might not be a perfect solution yet  and it   s with jQuery  but maybe it   s a direction   concept to work on  what about doing it the other way round  Which means deactivating the  hover css states by default and activate them if a mousemove event is detected anywhere on the document  Of course this does not work if someone deactivated js  What else might speak against doing it this way round   Maybe like this   CSS      will only work if html has class  mousedetected     html mousedetected a hover      color blue     border-color green      jQuery      adds  mousedetected  class to html element if mouse moves  which should never happen on touch-only devices shouldn   t it         body   mousemove  function            html   addClass  mousedetected

User · Answer

I m dealing with a similar problem currently   There are two main options that occur to me immediately   1  user-string checking  or  2  maintaining separate mobile pages using a different URL and having users choose what s better for them    If you re able to use an internet duct-tape language such as PHP or Ruby  you can check the user string of the device requesting a page  and simply serve the same content but with a  lt link rel  mobile css    gt  instead of the normal style    User strings have identifying information about browser  renderer  operating system  etc  It would be up to you to decide what devices are  touch  versus non-touch  You may be able to find this information available somewhere and map it into your system   A  If you re allowed to ignore old browsers  you just have to add a single rule to the normal  non-mobile css  namely  EDIT  Erk  After doing some experimentation  I discovered the below rule also disables the ability to follow links in webkit-browsers in addition to just causing aesthetic effects to be disabled - see http   jsfiddle net 3nkcdeao  As such  you ll have to be a bit more selective as to how you modify rules for the mobile case than what I show here  but it may be a helpful starting point            pointer-events  none  important     only use  important if you have to        As a sidenote  disabling pointer-events on a parent and then explicitly enabling them on a child currently causes any hover-effects on the parent to become active again if a child-element enters  hover   See http   jsfiddle net 38Lookhp 5   B  If you re supporting legacy web-renderers  you ll have to do a bit more work along the lines of removing any rules which set special styles during  hover  To save everyone time  you might just want to build an automated copying   seding command which you run on your standard style sheets to create the mobile versions  That would allow you to just write update the standard code and scrub away any style-rules which use  hover for the mobile version of your pages     I  Alternatively  simply make your users aware that you have an m website com for mobile devices in addition to your website com  Though subdomaining is the most common way  you could also have some other predictable modification of a given URL to allow mobile users to access the modified pages  At that stage  you would want to be sure they don t have to modify the URL every time they navigate to another part of the site    Again here  you may be able to just add an extra rule or two to the stylesheets or be forced to do something slightly more complicated using sed or a similar utility  It would probably be easiest to apply  not to your styling rules like div not  disruptive  hover      wherein you would add class  disruptive  to elements doing annoying things for mobile users using js or the server language  instead of munging the CSS     II  You can actually combine the first two and  if you suspect a user has wandered to the wrong version of a page  you can suggest that they switch into out of the mobile-type display  or simply have a link somewhere which allows users to flop back and forth  As already-stated   media queries might also be something to look use in determining what s being used to visit   III  If you re up for a jQuery solution once you know what devices are  touch  and which aren t  you might find CSS hover not being ignored on touch-screen devices helpful

User · Answer

I have encountered the same problem  in my case with Samsung mobile browsers  and therefore I stumbled upon this question    Thanks to Calsal s answer I found something that I believe will exclude virtually all desktop browsers because it seems to be recognized by the mobile browsers I tried  see screenshot from a compiled table  CSS pointer feature detection table     MDN web docs state that      The pointer CSS  media feature can be used to apply styles based on   whether the user s primary input mechanism is a pointing device  and   if so  how accurate it is      What I discovered is that pointer  coarse is something that is unknown to all desktop browsers in the attached table but known to all mobile browsers in the same table  This seems to be most effective choice because all other pointer keyword values give inconsistent results   Hence you could construct a media query like Calsal described but slightly modified  It makes use of a reversed logic to rule out all touch devices   Sass mixin    mixin hover-supported                      https   developer mozilla org en-US docs Web CSS  media pointer         coarse  The primary input mechanism includes a pointing device of limited accuracy               media not all and  pointer  coarse             amp  hover                content                     a       color green      border-color blue        include hover-supported             color blue          border-color green            Compiled CSS   a     color  green    border-color  blue     media not all and  pointer  coarse      a hover       color  blue      border-color  green          It is also described in this gist I created after researching the problem  Codepen for empirical research   UPDATE  As of writing this update  2018-08-23  and pointed out by  DmitriPavlutin this technique no longer seems to work with Firefox desktop

User · Answer

Pointer adaptation to the rescue  Since this hasn t been touched in awhile  you can use  a link  a visited      color  red     a hover      color blue      media  hover  none       a link  a visited         color  red          See this demo in both your desktop browser and your phone browser   Supported by modern touch devices  Note  Keep in mind that since a Surface PC s primary input  capability  is a mouse  it will end up being a blue link  even if it s a detached  tablet  screen   Browsers will  should  always default to the most precise input s capability

User · Answer

If Your issue is when you touch tap on android and whole div covered by blue transparent color  Then you need to just change the   CURSOR   POINTER   to  CURSOR   DEFAULT   use mediaQuery to hide in mobile phone Tablet   This works for me

User · Answer

Try this easy 2019 jquery solution  although its been around a while    add this plugin to head    src  https   code jquery com ui 1 12 0 jquery-ui min js  add this to js          on  touchend   function e      this  focus          applies to all elements some suggested variations to this are       input   checkbox    on  touchend   function e    this  focus        specify elements         on  click  touchend   function e      this  focus           include click event  css  body   cursor  pointer      touch anywhere to end a focus   Notes    place plugin before bootstrap js to avoif affecting tooltips only tested on iphone XR ios 12 1 12  and ipad 3 ios 9 3 5  using Safari or Chrome    References   https   code jquery com ui   https   api jquery com category selectors jquery-selector-extensions

User · Answer

This is also a possible workaround  but you will have to go through your css and add a  no-touch class before your hover styles   Javascript   if     ontouchstart  in document documentElement     document documentElement className      no-touch       CSS Example    lt style gt  p span       display  none      no-touch p hover span       display  inline     lt  style gt   lt p gt  lt a href     gt Tap me lt  a gt  lt span gt You tapped  lt  span gt  lt  p gt    Source  P s  But we should remember  there are coming more and more touch-devices to the market  which are also supporting mouse input at the same time

User · Answer

You can use Modernizr JS  see also this StackOverflow answer   or make a custom JS function   function is touch device      return  ontouchstart  in window           works on most browsers       navigator maxTouchPoints           works on IE10 11 and Surface     if   is touch device            html   addClass  touch      else        html   addClass  no-touch         to detect the support of touch event in the browser  and then assign a regular CSS property  traversing the element with the html no-touch class  like this   html touch a       width  480px        FOR THE DESKTOP  SET THE HOVER STATE    html no-touch a hover      width  auto     color blue     border-color green

User · Answer

The dirty way    Not elegant  but the easiest way that can save you   Remove anything that characterizes the hover     your-class hover before     color  blue    background  linear-gradient to bottom  rgba 231 56 39 0  0    aaaaaa 100        media all and  min-width 320px  and  max-width  960px         your-class hover before       color  black      background  transparent

User · Answer

tl dr use this  https   jsfiddle net 57tmy8j3   If you re interested why or what other options there are  read on   Quick n dirty - remove  hover styles using JS  You can remove all the CSS rules containing  hover using Javascript  This has the advantage of not having to touch CSS and being compatible even with older browsers   function hasTouch       return  ontouchstart  in document documentElement             navigator maxTouchPoints  gt  0             navigator msMaxTouchPoints  gt  0     if  hasTouch         remove all the  hover stylesheets   try      prevent exception on browsers not supporting DOM styleSheets properly     for  var si in document styleSheets          var styleSheet   document styleSheets si         if   styleSheet rules  continue         for  var ri   styleSheet rules length - 1  ri  gt   0  ri--            if   styleSheet rules ri  selectorText  continue           if  styleSheet rules ri  selectorText match   hover                styleSheet deleteRule ri                               catch  ex         Limitations  stylesheets must be hosted on the same domain  that means no CDNs   Disables hovers on mixed mouse  amp  touch devices like Surface or iPad Pro  which hurts the UX   CSS-only - use media queries  Place all your  hover rules in a  media block    media  hover  hover      a hover   color  blue        or alternatively  override all your hover rules  compatible with older browsers    a hover   color  blue      media  hover  none      a hover   color  inherit        Limitations  works only on iOS 9 0   Chrome for Android or Android 5 0  when using WebView  hover  hover breaks hover effects on older browsers  hover  none needs overriding all the previously defined CSS rules  Both are incompatible with mixed mouse  amp  touch devices   The most robust - detect touch via JS and prepend CSS  hover rules  This method needs prepending all the hover rules with body hasHover   or a class name of your choice   body hasHover a hover   color  blue      The hasHover class may be added using hasTouch   from the first example   if   hasTouch    document body className      hasHover    However  this whould have the same drawbacks with mixed touch devices as previous examples  which brings us to the ultimate solution  Enable hover effects whenever a mouse cursor is moved  disable hover effects whenever a touch is detected   function watchForHover          lastTouchTime is used for ignoring emulated mousemove events   let lastTouchTime   0    function enableHover         if  new Date   - lastTouchTime  lt  500  return     document body classList add  hasHover          function disableHover         document body classList remove  hasHover          function updateLastTouchTime         lastTouchTime   new Date          document addEventListener  touchstart   updateLastTouchTime  true    document addEventListener  touchstart   disableHover  true    document addEventListener  mousemove   enableHover  true     enableHover      watchForHover     This should work basically in any browser and enables disables hover styles as needed   Here s the full example - modern  https   jsfiddle net 57tmy8j3  Legacy  for use with old browsers   https   jsfiddle net dkz17jc5 19

User · Answer

It was helpful for me  link  function hoverTouchUnstick            Check if the device supports touch events     if  ontouchstart  in document documentElement               Loop through each stylesheet         for var sheetI   document styleSheets length - 1  sheetI  gt   0  sheetI--                var sheet   document styleSheets sheetI                  Verify if cssRules exists in sheet             if sheet cssRules                       Loop through each rule in sheet                 for var ruleI   sheet cssRules length - 1  ruleI  gt   0  ruleI--                        var rule   sheet cssRules ruleI                          Verify rule has selector text                     if rule selectorText                               Replace hover psuedo-class with active psuedo-class                         rule selectorText   rule selectorText replace   hover     active

User · Answer

2020 Solution - CSS only - No Javascript Use media hover with media pointer will help you guys resolve this issue  Tested on chrome Web and android mobile  I known this old question but I didn t find any solution like this   x000D   x000D   media  hover  hover  and  pointer  fine      a hover   color  red      x000D   lt a href      gt Some Link lt  a gt  x000D   x000D   x000D

User · Answer

According to Jason  s answer we can address only devices that doesn t support hover with pure css media queries  We can also address only devices that support hover  like moogal  s answer in a similar question  with  media not all and  hover  none   It looks weird but it works    I made a Sass mixin out of this for easier use    mixin hover-supported        media not all and  hover  none             amp  hover                content                      Update 2019-05-15  I recommend this article from Medium that goes through all different devices that we can target with CSS  Basically it s a mix of these media rules  combine them for specific targets    media  hover  hover           Device that can hover  desktops        media  hover  none           Device that can not hover with ease       media  pointer  coarse           Device with limited pointing accuracy  touch        media  pointer  fine           Device with accurate pointing  desktop  stylus-based        media  pointer  none           Device with no pointing        Example for specific targets    media  hover  none  and  pointer  coarse           Smartphones and touchscreens        media  hover  hover  and  pointer  fine           Desktops with mouse        I love mixins  this is how I use my hover mixin to only target devices that supports it    mixin on-hover        media  hover  hover  and  pointer  fine             amp  hover                content                     button        include on-hover           color  blue

[html] How to remove/ignore :hover css style on touch devices

Examples related to html

Examples related to css

Examples related to hover

Examples related to touch