时间戳

首页 > 解决方案 > 粘性：悬停/：专注于触摸设备

jquery - 粘性：悬停/：专注于触摸设备

问题描述

有没有办法解决下面引用中提到的问题：

引导程序： 链接

: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中修复它？

标签： jqueryhtmlcsstwitter-bootstrapbootstrap-4

解决方案

这是使用 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>

推荐阅读