問題：
當觸控裝置造訪網站時，：：懸空停CSS 樣式在點擊或點擊時觸發。這可能會分散注意力，甚至導致互動元素無法存取。
目標：
在不知道每個聲明選擇器的情況下刪除或忽略觸控裝置的所有 :hover CSS 聲明。
解決方案：
使用 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>優點：
使用 @media 區塊包含 :hover 規則。
<code class="css">@media (hover: hover) {
a:hover { color: blue; }
}</code>優點：
偵測觸控事件使用 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>優點：
以上是如何有效停用觸控裝置上的 :hover 樣式：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
