sticky: hover /: фокус на сенсорных устройствах - PullRequest
Новая
       6

sticky: hover /: фокус на сенсорных устройствах

0 голосов
/ 13 февраля 2020

есть способ решить проблему, указанную в приведенной ниже цитате:

Bootstrap: ссылка

:hover невозможно на большинстве сенсорных устройств, iOS эмулирует это поведение, что приводит к появлению «липких» стилей наведения, которые сохраняются после нажатия одного элемента. Эти стили наведения удаляются только тогда, когда пользователи нажимают на другой элемент.

вот мой код: 

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

Когда вы нажимаете кнопку на ipad, состояние :active не меняется и остается липким. Есть ли способ исправить это в css?

1 Ответ

0 голосов
/ 13 февраля 2020

Вот как добавить активный с css Дайте мне знать, если это поможет:) 

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