html - 如何在 css 中仅针对非触摸设备设置样式？

Question

我正在用纯 CSS 为按钮创建悬停效果。但我希望只有在鼠标悬停时才会出现这种效果。但是当触摸设备中的按钮发生触摸事件时，就会出现悬停效果。如何限制这种影响仅适用于非触摸设备？

.toolbar-button:not(.media-control):not(#page-count-button):hover:enabled:after {
    content: "";
    display: block;
    width: 37px;
    height: 34px;
    background-image:-webkit-gradient(linear, top, bottom, from(rgba(255,255,255, 0)), color-stop(0.65, rgba(255,255,255, 0.1)), to(rgba(255,255,255, 0.6)));
    background-image:-webkit-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
    background-image: -moz-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
    background-image: -ms-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
    background-image: -o-linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
    background-image: linear-gradient( rgba( 255, 255, 255, 0), rgba(255,255,255, 0.15) 70%, rgba(255,255,255, 0.6));
}

注意:我在这项工作中使用了 jQuery-touch-punch。

Answer 1

认为您正在使用 modernizr。然后它退出很容易

只需添加类“.no-js”

 .no-touch a:hover,
 .no-js a:hover { color: #06e; }

查看此链接以获取更多说明 Github- No :hover