'主動'而不是：懸停觸摸設備

我使用:hover來顯示一個菜單不透明，當鼠標懸停時 - 顯然這不適用於觸摸設備。這fiddle顯示我想要實現（向下滾動以查看透明度）。在我的完整示例中，我使用複選框來下拉子菜單，這很棒。'主動'而不是：懸停觸摸設備

顯然我不能使用CSS遍歷'向上'，所以選擇一個複選框我不能影響祖父母nav。有沒有人有什麼建議？是否存在某種類型的:active或遍歷DOM的等價物？

我不確定我是否讓自己特別清楚，但任何幫助，將不勝感激。我懷疑唯一的解決方案可能是一個jQuery的？

2013-04-24 Jamie

是的，你會用這個javascript。（或者理想情況下，不要設計依賴懸停的交互） – 2013-04-24 21:02:13

所以，很簡單，只是避免不透明效果完全移動。也就是說，如果客戶端在觸摸設備上，則將不透明度設置爲1。

2013-04-24 21:03:39 imsky

愚蠢簡單！我已經通過modernizer獲得了「觸摸」類。我爲什麼沒有想到這一點！ – Jamie 2013-04-24 21:32:11

使用媒體查詢爲手持設備做其他事情;

@media handheld { 
    /* .myHoverElement:active { }*/ 
}

你可以嘗試尋找一些觸摸設備，你特別想要的目標。例如;

iPhone < 5：

@media handheld and (device-aspect-ratio: 2/3) {}

iPhone 5：

@media handheld and (device-aspect-ratio: 40/71) {}

的iPad：

@media handheld and (device-aspect-ratio: 3/4) {}

至於評論認爲cimmanon說明。 StackOverflow有很多關於它的信息，以及如何定位特定設備，並且如果handheld在某些設備上不起作用，可能會更好地檢測它們;

2013-04-24 21:03:01

任何現代移動設備是否對'手持設備「做出響應？我見過的每一個來源都說不。 – cimmanon 2013-04-24 21:05:26

回答