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

Answer 2

如果您使用媒体查询并执行其中一项操作会怎么样？

@media (max-width:500px) and (min-width:320px) { /* some specific mobile viewport */

    .toolbar-button:desktopbuttonstyles {
        display: none;
    }

    .toolbar-button:MOBILEbuttonstyles {
        display: block;
    }

}

Answer 3

不是理想的解决方案，但它应该有效。

@media screen and (min-device-width:1024px) /*catch touch screen devices */
{

    .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));
    }

    }

您还可以使用现代化器和：

.touch *:hover {
    place default values here
}

如何在css中仅为非触摸设备设置样式？

3 个答案: