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

Posted 2023-03-06

【中文标题】粘性：悬停/：专注于触摸设备

【英文标题】：sticky :hover/:focus on touch devices

【发布时间】：2020-05-28 18:21:55

【问题描述】：

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

引导程序： link

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

【问题讨论】：

也许这对你有帮助***.com/questions/23885255/…

【参考方案1】：

这里是如何使用 css 添加 active 让我知道这是否有帮助:)

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