如何在CSS中只触摸非触摸设备？

我正在为纯CSS中的按钮创建悬停效果。但是我希望这种效果只有在鼠标悬停发生时才会发生。但是当触摸设备中的按钮出现触摸事件时，会发生悬停效果。我怎样才能限制这种效果只有非触摸设备？如何在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。

来源

2014-02-12 Foreever

认为你正在使用的Modernizr的。那么它的退出容易

只需添加类 “没有-JS”

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

检查这个环节作进一步的解释Github- No :hover

来源

2014-02-12 07:42:18 Karthikeyan

如果您 - 使用媒体查询并完成其中的一项，该怎么办？

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

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

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

}

来源

2014-02-12 07:39:32

不是一个理想的解决方案，但它应该工作。

@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 
}

来源

2014-02-12 07:39:55

如何在CSS中只触摸非触摸设备？

回答

相关问题