Question

我很可能已经失去了它。

我的：悬停，a：链接状态似乎不适用于移动设备。

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

/* 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
}

在桌面上hover成功运行，就像你悬停时显示紫色然后再回到黑色。

为什么在移动设备上，当点击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中添加更多类以定位特定的浏览器/设备。

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

Answer 2

选择元素后，您需要使用:active和:visited来更改颜色。

移动设备上的

:hover无效。设备尝试尽可能好地渲染它，但触摸设备没有:hover状态。

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

2 个答案: