http://blog.roachking.net/blog/2013/02/15/noscript-css/
Add the class .no-touch to all :hovers in style.css
我們在 html 標籤裡加入一個 no-js 的 class, 接著讀入 modernizr, modernizr 會把瀏覽器支援的東西寫入 html 的 class, 於是就會出現兩種情況:
不支援 JavaScript 的瀏覽器, 不會執行 modernizr, html 會有當初設定的 class "no-js"。
支援 JavaScript 的瀏覽器,執行 modernizr, html 不會有 class "no-js"、會產生 class "js"。
<!doctype html>
<html class="no-js">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body></body>
</html>
如果不想用 modernizr,也可以用一行輕鬆寫出來:
<!doctype html>
<html class="no-js">
<head>
<script>
(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
</script>
</head>
<body></body>
</html>
http://leonardburton.co/2013/06/a-better-way-to-implement-hover-states-for-the-responsive-web/
/** This example assumes you've reset your <a> as line below **/
a { text-decoration: none; }
/** Hover states **/
html.oldie a:hover {
text-decoration: underline;
}
/** html 沒有 .touch class 時候的 a:hover **/
html:not(.touch) a:hover {
text-decoration: underline;
}
/** 只有螢幕模式和 最小寬 960px (width 960px 以上) 時 **/
@media only screen and (min-width: 960px) {
html.no-js a:hover {
text-decoration: underline;
}
}