There is the usual design of css buttons with the main color and hover. Everything works as it should, but not for mobile. There, after pressing the button, the color remains in the hover position. And only by "poking" with the finger into the screen again, hover changes to its original value. How to remove this flaw? (Everything that was on the topic is a problem with the accumulated value of hover in mobile. As for me, as you can see, it works, but incorrectly). Code below.

button{ position:relative; z-index:800; background:#fff; border:none; color:#a88854; font-size:16px; display:inline; text-align:center; width:48px; height:48px; cursor:pointer; left:0; top:0; line-height:48px; text-align:center; outline:none; -webkit-transition: all 0.2s ease-in; -moz-transition:all 0.2s ease-in; -o-transition: all 0.2s ease-in; -transition: all 0.2s ease-in; } button:hover{ color:#b8b8b8; }

  • But how do you want to move the cursor on the mobile phone? he is not there - MaximLensky
  • Comments are not intended for extended discussion; conversation moved to chat . - Qwertiy ♦ pm
  • @PaulVarshavsky, you are right about the cursor, but the question is actually interesting. - Qwertiy ♦

2 answers 2

It is possible by the following scheme:

 button { color: blue; } button:hover { color: red; } @media (pointer: coarse) { button:hover { color: blue; } } 
 <button>Just a button</button>

Theoretically, it would be possible to do it right, but browser support does not please:

 button { color: blue; } @media (pointer: fine) { button:hover { color: red; } } 
 <button>Just a button</button>

    Below is the script. In the desktop version, it does not change anything. Mobile version does not respond to: hover. Q.E.D. Install the script enough before

     <script> function hasTouch() { return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; } if (hasTouch()) { // remove all :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 >= 0; ri--) { if (!styleSheet.rules[ri].selectorText) continue; if (styleSheet.rules[ri].selectorText.match(':hover')) { styleSheet.deleteRule(ri); } } } } catch (ex) {} } </script>