0

First thing is, I can only edit the CSS/LESS portion of the code.

I've encountered a problem, there's a span that has a background color added on :hover and a different background upon clicking it, where it gets a class .active via JS.

Problem is, on iPad and iPhone on first tap it activates the :hover styles, a secondary tap is required to turn on the added class .active. Anyone knows how to ignore the :hover style and go straight to adding a class?

Much appreciated!

Rohit Verma
  • 3,657
  • 7
  • 37
  • 75
Kamil Podryban
  • 11
  • 2
  • Possible duplicate of [Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?](https://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users) – 3rdthemagical Jul 17 '18 at 10:11

3 Answers3

0

Place all your :hover rules in a @media block:

@media (hover: hover) {
    a:hover { color: blue; }
}
Nitha
  • 672
  • 5
  • 10
  • Hmm, it doesn't seem to be working. Either I am doing something wrong or some other styles (there's three levels of stylesheets) are still interfering. Nevertheless, thank you! – Kamil Podryban Jul 17 '18 at 05:56
  • alternatively, you can override all your hover rules by adding @media (hover: none) { your-element:hover { color: inherit; } } – Nitha Jul 17 '18 at 06:28
0

Do this

a:hover {
  background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}
<a href="#">Focus</a>
Axel
  • 4,365
  • 11
  • 63
  • 122
0

This seems to be a known issue. Please check "https://getbootstrap.com/docs/3.3/getting-started/#support-sticky-hover-mobile" for more details. Few of the possible solutions to solve the above problem is "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml"

Charu Maheshwari
  • 1,583
  • 1
  • 8
  • 9
  • Yeah, so basically there's nothing to be done? It's a known issue with no solution - the ones in the second link require editing files I have no access to. – Kamil Podryban Jul 17 '18 at 12:42
  • The link "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml" does mention few of the solutions (javascript, though) but you can use any one of the way to make hover states handled. – Charu Maheshwari Jul 17 '18 at 12:46
  • That's what I meant by "editing files I have no access to" - as I've specified in the main post, I can only use CSS/LESS, as it's a part of an authoring tool and I only have access to those parts, using javascript, jQuery and other such solutions is out of my reach. – Kamil Podryban Jul 17 '18 at 12:59
  • I am sorry, I missed "First thing is, I can only edit the CSS/LESS portion of the code." With CSS, no solution is there to the best of my knowledge. – Charu Maheshwari Jul 18 '18 at 05:53