如何在觸控裝置上有效停用 :hover CSS 樣式？

忽略觸控裝置上的:hover CSS 樣式

開發網站時，最好刪除或忽略觸控裝置上的:hover CSS 聲明，因為這些聲明可能很尷尬且不必要。

快速而骯髒：使用 JavaScript

一種方法是使用 JavaScript 刪除所有包含 :hover 的樣式規則。此方法與舊版瀏覽器相容，並且不需要修改 CSS。

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

限制：

• 樣式表必須託管在同一網域上。
• 混合滑鼠和觸控裝置仍然可以觸發 :hover 事件，對使用者體驗產生負面影響。

僅 CSS：媒體查詢

或者，您可以使用媒體查詢來停用某些裝置的 :hover 樣式。

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

限制：

• 需要媒體查詢，但不需要所有瀏覽器都支援。
• 不適用於混合滑鼠和觸控裝置。

最強的：JavaScript 偵測

對於最可靠的解決方案，使用JavaScript 偵測觸控事件並在:hover 規則前加上自訂類。

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

此方法克服了純 CSS 方法的限制，但在混合滑鼠和觸控裝置。

要解決此問題，請實施更複雜的方法，根據滑鼠遊標移動啟用懸停效果，並在觸控事件上停用它們。

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

此解決方案提供可靠的偵測和處理所有裝置上的懸停樣式，而不影響使用者體驗。

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