如何防止觸控螢幕裝置上出現不必要的 :hover 效果？

克服觸控螢幕裝置上的 :hover 怪癖

問題： :hover CSS 樣式在觸控裝置上無意觸發，導致不良效果。

解決方案：實作全面的策略來停用或忽略觸控螢幕平台上的 :hover 聲明。

快速且骯髒：JavaScript 刪除

對於務實的方法， JavaScript 可用於刪除所有 :hover 樣式。請注意，樣式表必須託管在同一網域上，這可能會妨礙混合觸控/滑鼠裝置上的使用者體驗。

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

基於CSS 的解決方案

媒體查詢：

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

但是，此解決方案僅適用於iOS 9.0Android 5.0 設備。

條件規則：

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

這需要前置所有 :hover 規則都具有基於觸控螢幕偵測新增或刪除的類別（例如 hasHover）。

最佳偵測：JavaScript 和 CSS

最強大的解決方案將 JavaScript 觸控偵測與 CSS 結合條件規則。

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

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

此方法在偵測到滑鼠時會啟用懸停效果，並在觸碰時停用它們。

實作建議

對於現代瀏覽器，建議使用類別組合 JavaScript 和 CSS 條件規則。對於舊版瀏覽器，基於 JavaScript 刪除 :hover 樣式是一個可行的選擇。

其他資源：

• [GitHub 範例](https:// jsfiddle.net/57tmy8j3/)

以上是如何防止觸控螢幕裝置上出現不必要的 :hover 效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！