如何在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中只觸摸非觸摸設備？

回答

相關問題