禁用手持設備上的懸停事件

我的網站上有一些奇特的懸停動畫。我想在手持設備（如平板電腦和手機）上禁用它們。禁用手持設備上的懸停事件

我知道我可以使用最小/最大寬度來做到這一點，但我想保持在所有視口尺寸的桌面上的瀏覽器中的效果。我不想在手機/平板電腦上使用它的原因僅僅是因爲沒有鼠標......因此......懸停效果不會按照我的意願進行翻譯。

我看到你可以檢測到特定的用戶代理樣式表？或者有一些腳本來做到這一點？我找到了一些，但他們沒有很好地解釋。

Modernizr將無法做到這一點呢？我問，因爲我在研究中看到它在一篇文章中提到。

在此先感謝:)

來源

2014-10-02 Forrest

您可以使用JS和使用類來做到這一點。 Example

HTML：

<a href="#" id="link">Homepage</a>

CSS：

#link { 
    background: whitesmoke; 
    border: 1px solid gainsboro; 
    display: table; 
    padding: 5px; 
    transition: .5s; 
} 
/* hover won't work if the #link has a class "nohover" */ 
#link:not(.nohover):hover { 
    background: skyblue; 
    border: 1px solid dodgerblue; 
}

添加.nohover到元件的時候，屏幕寬度小於目標設備寬度。在這種情況下爲500px。

window.onresize = function() { 
    if (window.innerWidth < 500) { 
     document.getElementById("link").className = "nohover"; 
    } else { 
     document.getElementById("link").className = ""; 
    } 
}

來源

2014-10-02 23:28:36 akinuri

你的榜樣，我調整我的瀏覽器和懸停狀態被禁用。我希望這發生在使用鼠標的設備上。 – Forrest 2014-10-02 23:38:43

您可以使用Modernizr.js庫。 Modernizr的將檢查支持觸控和附加.no-touch類HTML標記，如果設備不支持觸摸，所以你可以做你的懸停鏈接如下：

.no-touch a:hover { 
}

來源

2014-10-02 23:31:09 Blake

太棒了:)。我已經看過這個。似乎是一個很好的做法！ – Forrest 2014-10-02 23:37:36

禁用手持設備上的懸停事件

回答

相關問題