纯css：仅用鼠标悬停

Question

触摸屏上的:hover可能是一个可访问性问题（下拉菜单）或只是设置元素（按下按钮时颜色会改变，而不会因虚拟悬停而恢复）。

因此我决定在触摸元素时以及使用鼠标徘徊时有不同的行为。这很容易通过Javascript实现并利用mousein和mouseout事件，并在适当的位置添加hover类。这有两个主要问题：

• 它是基于Javascript的，具有许多含义。我不打算将悬停功能称为无障碍问题，因为有一个指针光标。
• 我的主要问题是我必须手动指出哪些元素需要在CSS样式之外添加类。这是额外的工作，增加了一个额外的区域来犯错误，并且在语义上并不好。

所以我的问题是：是否有任何纯CSS方法可以检测是否且仅当鼠标悬停在某个元素上？一个不会对触摸做出响应的方法。

不足以检测设备是否具有触控功能并从中删除悬停功能。现在许多设备同时具有鼠标和触控功能，这将阻碍完美的鼠标体验。

Answer 1

方法1：Javascript

为什么不从身上有.no-touch类的身体开始，然后使用JS检测设备，如果设备是移动设备则删除该类。

if(//Code to detect mobile)
    $("body").removeClass("no-touch");

---

然后，在您的CSS中，所有:hover的代码都依赖于该父类。

.no-touch a:hover
{
    text-decoration: underline;
}

这将确保在JS失败时默认启用悬停样式，以及防止为您要禁用的每个元素委派长时间的过程。

---

与此相反的是，如果设备是移动的，则添加一个类，然后对CSS进行编码以排除具有该类的主体：

body:not(.touch) a:hover
{
    text-decoration: underline;
}

---

它并不完美，因为它仍然需要JS，但目前还没有一种已知的纯粹css方法来检测触摸事件而不是鼠标事件，至少我已经能够通过一些广泛的Google搜索找到

---

方法2：CSS媒体查询

另一种选择是使用媒体查询，但这仍然有很多不足之处，因为设备继续获得更好的分辨率;有些平板电脑的屏幕宽度相当于一些旧的显示器，不幸的是，旧技术的发生速度非常慢。

这样做的好处就是纯粹的CSS，但也有自己的陷阱。

你可能有人在横向@ 1024x768中使用iPad，这将被视为触控设备，而一位年长的绅士在具有相同分辨率的旧3x2液晶显示器上使用桌面：1024x768

如果您需要，可以使用以下代码：

@media all and (min-width: 1024px)
{
    a:hover
    {
        text-decoration: underline;
    }
}