sticky :hover/:focus on touch devices

Question

is there a way to fix the problem mentioned in the quote below:

Bootstrap: link

:hover isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element.

here is my code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid p-3">
  <button class="btn btn-outline-primary">Click here</button>
</div>

When you tap the button in ipad the :active state doesn't change and stays sticky. Is there any way to fix it in css?

Maybe this helps you https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices — Aluminium Shek, Feb 13 '20 at 06:24

score 0 · Answer 1 · answered Feb 13 '20 at 05:53

Here is how to add active with css Let me know if this help :)

.active:active {
  color: red;
}
.active:hover {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

<div class="container-fluid p-3">
<button class='btn btn-outline-primary active'>Active</button>
<button class='focus'>Focus</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



  <button class="btn btn-outline-primary">Click here</button>
</div>

sticky :hover/:focus on touch devices

1 Answers1