纯css for:仅用鼠标悬停

Pure css for :hover only with mouse

本文关键字：鼠标 悬停 css for      更新时间：2023-09-26

:hover在触摸屏上的出现可能是一个可访问性问题（下拉），也可能只是混淆了设计元素（按下按钮时更改颜色，但由于虚拟悬停而无法恢复）。

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

  • 它是基于Javascript的，有很多含义。我不会把没有悬停功能称为可访问性问题，因为有一个指针光标
  • 我的主要问题是，我将不得不手动指示哪些元素需要在CSS样式之外添加类。这是额外的工作，增加了一个额外的出错区域，而且在语义上并不好

所以我的问题是：是否有任何纯粹的CSS方法可以检测鼠标是否悬停在元素上一个对触摸没有反应的人。

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

方法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方法来检测触摸事件，而不是鼠标事件，至少我已经通过谷歌搜索找到了这一点。

方法2:CSS媒体查询

另一种选择是使用媒体查询，但随着设备不断获得更好的分辨率，这仍有很多不足之处；有些平板电脑的屏幕宽度相当于一些旧显示器，不幸的是，旧技术消亡得很慢。

这具有纯CSS的优点，但也有其自身的缺陷。

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

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

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

仅使用CSS的解决方案，不使用Javascript

使用媒体悬停与媒体指针将帮助您解决此问题：

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}
相关文章：