如何清除触摸屏上的“已触摸”按钮焦点、激活、悬停状态。

Question

尝试弄清如何将按钮重置回“未触摸”状态。我正在使用一个按钮：

    <div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="service-previous" data-role="button" data-icon="arrow-l">Prev</a>
        <a href="#" id="service-next" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
    </div>

当我在iPad上点击Next或Prev时，它会运行我编写的JavaScript函数，然后按钮保持永久激活状态，悬停或聚焦（不确定状态）。

我的目标：在JavaScript函数运行后，我希望将按钮重置为未激活，未悬停或未聚焦状态。当然，在非触摸屏幕鼠标单击时，这种情况不会发生。

我尝试过：

$(another-selecter).focus();
$(another-selecter).click();
$('#service-next').blur();

同时

$('#service-next').css('background-color', 'original-color') 

这个功能是正常工作的，但当然，这就是高亮结束的地方，我不想要这样。我也不想手动设置 CSS，因为我使用的主题可能会在将来更改，并且希望尽可能避免解决方案。

- John Smith

Answer 1

为了避免这种情况，您可以在CSS文件中使用以下@media来自定义触摸屏幕的悬停效果。

@media (hover: none) and (pointer: coarse) {
   /* Add hover styles here */
}

使用案例示例

假设我们有一个带有id btn-one 的按钮，它具有透明的背景颜色，但悬停效果会将其更改为红色。

通过应用以下代码，当触摸设备的用户与应用程序交互时，@media将触发样式更改。在悬停时保持背景颜色透明。通过这种方式，我们可以防止按钮具有粘性行为。

相反，如果设备不是触摸屏幕，则悬停样式将像不存在此@media一样工作，因此背景颜色将在悬停时正常更改。

@media (hover: none) and (pointer: coarse) {
  #btn-one:hover {
    background-color: transparent!important;
    color: black;
  }
}

- Gass