css - 为什么我的链接在移动设备上保持悬停状态？

Question

我很可能已经失去了它。

我的 :hover, a:link 状态似乎不适用于移动设备。

我在屏幕底部有一个固定的导航:

/* nav */
nav#desktop {
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    background-color: transparent;
    padding-top: 28px;
    z-index: 1002
}
nav#desktop > ul {
    position: relative;
    height: 25px;
    overflow: hidden;
    float: left;
    margin: 0 0 28px 2.3%
}
    @media only screen and (max-width: 675px) {
        nav#desktop > ul {
            position: relative;
            height: 25px;
            overflow: hidden;
            float: left;
            margin: 0 0 28px 3%
        }
    }
nav#desktop > ul > li {
    width: 200px;
    font-size: 19px;
    font-weight: 400;
    float: left;
    margin-right: 12px;
    position: abolute;
    bottom: 0px;
    overflow: hidden
}
nav#desktop a {
    color: #000
}
nav#desktop a:hover {
    color: #8974A7
}

在桌面上，悬停可以成功运行，就像当您悬停时它会显示紫色，然后又变回黑色。

为什么在移动设备上，当单击 li 元素时，它会变成紫色，然后保持紫色。

我确实有:

nav#desktop a {
    color: #000
}
nav#desktop a:hover, a:focus {
    color: #8974A7
}

认为 :focus 在它后面，现在已将其删除；仍然没有变化。

有趣的是，我有:

#mobile-open #mobile-container > ul {
    position: relative
}
#mobile-open #mobile-container > ul > li {
    margin: 0px;
    padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
    margin: 0px;
    padding: 0px
}
#mobile-open #mobile-container a {
    color: #fff;
    text-decoration: none;  
}
#mobile-open #mobile-container a:hover {
    color: #ccc
}

对于我打开的菜单中的链接，这两种状态按预期工作。

Answer 1

正如您可以想象的那样，:hover 几乎不可能在消费类触摸设备上真正支持(无法检测用户何时将鼠标悬停在屏幕上但没有触摸它)。

因此，设备会尽力而为，最终会得到您所观察到的结果，这是一种非常糟糕的体验，但您会受到浏览器供应商的摆布 - 您正在他们的平台上进行开发。

做一些看起来经常做的事情，添加一段 JavaScript 来检测(不完美的)用户代理/触摸检测，并向 body 元素添加一个 touch 类。

然后，在 CSS 中的任何地方，您都必须执行以下操作:

body:not(.touch) someselector:hover { }

或者做相反的事情:

body.no-touch someselector:hover { ... }

如果您决定在触摸时喜欢特定浏览器供应商的 :hover 实现，而不是另一个浏览器供应商的实现，那么您可以向 CSS 添加更多类以针对特定浏览器/设备.

所有的解决方案都非常糟糕，真的。