移除移動設備上的懸停事件

我在網站上使用:hover事件，但在移動設備上使用該系統時遇到問題。移除移動設備上的懸停事件

有沒有辦法在css或js中刪除它？我嘗試了很多東西，但我沒有運氣。

我試過modernizr.com和媒體查詢沒有成功。

我頂嘴代碼：

ul { 
    li { 
     padding: 20px; 
     &:hover { 
     background-color: $red; 
     color: $black; 
     } 
    } 
    }

媒體查詢：

@media (max-width: $screen-sm-min) { 
    ul { 
    li { 
     &:hover { 
     color: inherit; 
     cursor: pointer; 
     } 
    } 
    } 
}

青菜MQ變量：

$screen-sm-min: 768px;

來源

2016-06-01 Raduken

雖然你已經嘗試過媒體的質疑，還是我讓你知道它可以與它。請分享您的代碼 – brk

我編輯我的問題與代碼。 – Raduken

爲什麼不僅僅將寬度樣式應用於所需的寬度，而是將寬度應用於所有寬度，然後試圖撤消它們？ –

你可以使用個互動CSS媒體查詢功能但他們都比較新，iOS9 +和Android 5+：http://caniuse.com/css-media-interaction

您可以使用到這個功能可

/* :hover will only work in Edge, Chrome, Safari 9+ for now */ 
@media (hover: hover) { 
    .your-selector:hover { 
     color: red; 
    } 
}

或者只適用:hover風格，如果您現在想要更廣泛的支持，請只刪除:hover：

/* :hover will be removed in iOS 9+ and Android 5+ */ 
.your-selector:hover { 
    color: red; 
} 
@media (hover: none) { 
    .your-selector:hover { 
     color: oldcolor; 
    } 
}

如果您想要更廣泛的支持，您需要通過javascript檢測觸摸功能。做一個相當標準的方法是這樣的：

/* add a class to <html> */ 
var isTouch = 'ontouchstart' in window; 
document.documentElement.className += isTouch?' touch ':' no-touch ';

/* only use hover when the no-touch class is present */ 
.no-touch { 
    .your-selector:hover { 
     color: red; 
    } 
}

使用與您的代碼這最後的解決方案：

ul { 
    li { 
    padding: 20px; 
    .no-touch &:hover { 
     background-color: $red; 
     color: $black; 
    } 
    } 
}

來源

2016-06-01 08:44:41

我學到了新東西 - 謝謝。從未使用媒體查詢交互功能 - 我將從現在開始！ –

移除移動設備上的懸停事件

回答

相關問題