纯css：仅用鼠标悬停

:hovering on a touch screen can be an accessibility problem (dropdowns) or just muck up design elements (changing colour on a button press and not reverting due to the virtual hover).

：悬停在触摸屏上可能是一个辅助功能问题（下拉菜单）或只是弄乱设计元素（按下按钮时颜色改变而不会因虚拟悬停而恢复）。

So I've resolved to having different behaviour when an element is touched and when it is hovered with the mouse. This is easy enough to implement with Javascript and leveraging mousein and mouseout events, and adding a hover class where appropriate. There are two main problems with this:

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

• It's Javascript based which has a number of implications. I wouldn't call not having hover functionality an accessibility issue, as there is a pointer cursor, though.
• 它是基于Javascript的，具有许多含义。我不会称悬停功能没有可访问性问题，因为有一个指针光标。
• My main problem is that I will have to manually indicate which elements need the classes added outside of my CSS styling. This is extra work, adds an extra area to make mistakes and isn't semantically nice.
• 我的主要问题是我必须手动指出哪些元素需要在CSS样式之外添加类。这是额外的工作，增加了一个额外的区域来犯错误，并且在语义上不是很好。

So my question is: is there any pure CSS way to detect if and only if the mouse has hovered over an element? One that doesn't respond to touches.

所以我的问题是：是否有任何纯CSS方式来检测是否以及只有鼠标悬停在元素上？一个不响应触摸的人。

It is not sufficient to detect if a device is touch capable and remove hover functionality from them. Now that many devices have both mouse and touch, this will hinder a perfectly good mouse-enabled experience.

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

1 个解决方案

#1

Method 1: Javascript

Why not start with the body having a .no-touch class on it, and then, using JS, detect the device, and remove the class if the device is mobile.

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

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

---

Then, in your CSS, code all :hover to be dependent on that parent class.

然后，在你的CSS中，代码all：hover依赖于那个父类。

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

This will ensure that the hover styles are enabled by default if JS fails, as well as preventing the otherwise long process of delegating each and every element that you want to disable hover for.

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

---

The converse of this would be to add a class if the device is mobile, and then code the CSS to exclude the body that has that class:

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

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

---

It's not perfect, as it still requires JS, but there is currently not a known purely-css way to detect touch events as opposed to mouse events, at least as I've been able to find through a somewhat extensive Google search.

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

---

Method 2: CSS Media Queries

The other option would be to use media queries, but this still leaves a lot to be desired, as devices continue to get better resolution; some tablets can have screen widths equivalent to some old monitors, and unfortunately, old technology dies very slowly.

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

This has the advantage of being purely CSS, but has its own pitfalls all the same.

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

You may have someone using an iPad in landscape @ 1024x768 that would be considered a touch device, while an older gentleman is using a desktop on an old 3x2 lcd monitor that has the same resolution: 1024x768

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

Here's the code though, if you want it:

这是代码，如果你想要的话：

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