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

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

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

值得注意的是，这只发生在浏览器Android 4中

---

我有什么选择

由于这是在Android上发生的，我建议您添加一些验证检查，看看UserAgent是否来自Android（根据我所读的内容，一个简单的正则表达式，如so:/Android/I），如果是，在body/html中添加一个class/data属性，并从中应用一个选择器

代码示例如下：

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

然后在CSS上：

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

---

在这种情况下，您始终可以使用Modernizer。检测触摸支持，然后相应地使用CSS。例如：

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

---

谢谢，它很有效。这就足够了，因为它只是一个学校项目，所以我可以向老师展示它在3个浏览器中工作。