禁用平板电脑设备的悬停图像

Question

我有一个带字段的仪表板式布局（例如symbaloo.com）。用户可以使用facebook等应用程序填写这些字段。单击某个字段时，会出现以下弹出窗口。

所有这些字段都对桌面用户具有悬停效果。当我单击平板电脑上的X按钮时，弹出窗口将按预期消失，但随后X按钮下方的字段将具有悬停效果。这是不希望的。当用户将鼠标悬停在该字段上时，我只希望它悬停。

请注意，这只发生在浏览器Android 4中。

我有什么选择？

Answer 1

由于这只是在Android上发生，我建议您添加某种验证检查，如果UserAgent来自Android（从我读过的，一个简单的正则表达式，如：/ android / i工作），如果所以，在body / html中添加一个class / data-attribute，并从那里应用一个选择器。

代码示例如下：

if(/android/i.test(navigator.userAgent)) {
  $('html').attr('data-android-device', '');
}

然后在CSS上：

[data-android-device] .mybutton:hover {
  /* Reset properties */
}

Answer 2

在这种情况下，您始终可以使用Modernizr。 DEtect Touch支持，然后相应地使用您的CSS。例如：

.no-touch .button:hover{//do something if no touch is detected}