如何有效停用觸控裝置上的 :hover 樣式：綜合指南

如何在觸控裝置上停用:hover 樣式：綜合指南

問題：
當觸控裝置造訪網站時，：：懸空停CSS 樣式在點擊或點擊時觸發。這可能會分散注意力，甚至導致互動元素無法存取。

目標：
在不知道每個聲明選擇器的情況下刪除或忽略觸控裝置的所有 :hover CSS 聲明。

解決方案：

JavaScript 刪除

使用 JavaScript 刪除所有包含 :hover 的 CSS 規則。

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

優點：

• 與舊版瀏覽器相容，不需要更改 CSS。
  缺點：
• 停用混合滑鼠和觸控裝置上的懸停，損害使用者體驗。
• 只能刪除同一網域上所託管的樣式表。

僅 CSS 與媒體查詢

使用 @media 區塊包含 :hover 規則。

<code class="css">@media (hover: hover) {
  a:hover { color: blue; }
}</code>

優點：

• 易於在 CSS 中實現。
  缺點：
• 需要支援懸停媒體查詢（iOS 9.0、Android Chrome、Android 5.0）。
• 混合老鼠和觸控設備不一致。

觸控偵測與 CSS 注入

偵測觸控事件使用 JavaScript 並有條件地新增 CSS 類別。

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

<code class="css">body.hasHover a:hover { color: blue; }</code>

優點：

• 比混合觸控裝置的媒體查詢更可靠。
  缺點：
• 仍會受到觸控模擬事件（例如觸控螢幕上的滑鼠遊標）的影響。

最終解決方案：動態懸停偵測

基於滑鼠遊標和觸控事件啟用或停用懸停樣式。

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

優點：

• 最強大的解決方案，適用於所有瀏覽器。
• 動態調整懸停樣式以適應裝置輸入。
  缺點：
• 觸碰事件後有短暫的延遲（例如 500 毫秒）以防止模擬老鼠移動事件。

以上是如何有效停用觸控裝置上的 :hover 樣式：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！