CSS在手機上的下拉菜單。如何避開：hover

我已經有搜索，但我找不到任何東西&也是我第一次使用該網站，所以希望它沒有被問到。CSS在手機上的下拉菜單。如何避開：hover

我遇到了一種情況。我絕不是一個有經驗的網站製作者。我正在學習。我有一個CSS下拉菜單，可以在桌面瀏覽器上正常工作。當我進入移動領域時，我遇到了一個問題，即:hover不起作用（顯然）。

我發現這一點：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly，但我不能讓紅潤的東西的工作。

有問題的網頁，我將其應用於在這裏：http://www.inkslinger.co.uk/calibre/index.html我真的不能工作了這一點和它的駕駛我絕對瘋狂。任何幫助將非常感激。

來源

2013-11-24 ikillbears

我們遇到了這個問題，並將鼠標懸停改爲點擊。

來源

2013-11-24 22:29:42 Juan

我的問題是我的一個懸停菜單項，頂部鏈接也是鏈接到另一個頁面。所以我認爲點擊不起作用？ – ikillbears

@ikillbears在「新」響應/自適應網絡中，我們必須做出妥協。如果頂層菜單項是鏈接，則需要考慮更改該鏈接。 –

您可以將菜單從懸停狀態切換到桌面版本，並使用觸摸設備的點擊。觸摸設備中不存在懸停的環境不同。您可以使用媒體查詢進行檢測並切換CSS或內容。 – Juan

而不是使用懸停，這當然是不可能在觸摸設備上使用：active可能是一個好的開始。在觸摸設備上仍然可以選擇某些東西，將菜單綁定到切換的活動狀態，即可完成。

來源

2013-11-24 22:35:47

我已經給了一個去哪裏，我認爲它會工作，但似乎並沒有解決問題。我發佈的第一個鏈接包含了網站上視頻的解決方案。但是，我不能讓我的生活得到它的工作 – ikillbears

對於這種情況，您必須從懸停狀態切換到點擊事件。沒有解決方法。

你絕對應該考慮改變你的設計有其左爲觸摸設備打開一個漢堡包風格的菜單。

從您發佈的鏈接中查看本演示。當您在移動設備中打開它時，它會更改爲不同的菜單樣式。 http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

此外，如果你想有你的頂級鏈接作爲直接鏈接到其他頁面;您可以在頂部按鈕上單擊兩次。首先點擊將打開菜單，打開菜單後，您可以像上面的演示中那樣爲其指定直接鏈接。

來源

2013-11-25 05:24:45 agaase

我有同樣的問題，發現我在這裏使用 hover example

的產後和安特納塔爾選項，當鼠標懸停的觸發下拉一個簡單的解決辦法，但你可能會注意到，他們沒有鏈接自己。在我原來的模型中，它們是鏈接，但是當我意識到這不適用於觸摸設備時，我只是將它們作爲下拉框的觸發器，並將鏈接放入框中。因此，對於你來說，你的'我們做什麼'鏈接，不會是鏈接，只是下拉菜單的觸發器，然後在菜單中你可以鏈接到'我們做什麼'的信息。

還值得記住的是，某些觸摸設備（如某些iPad）完全不喜歡懸停狀態，如果發現懸停狀態不會觸發您的下拉菜單，請添加「onclick =」返回true 「'到相關列表項目。這通常會使懸停狀態像點擊一樣工作。

希望這會有所幫助，我寫的代表了大約3天的時間來看看我的參考書庫。

來源

2014-01-21 09:52:14

，就把這行代碼你的頭標記內是這樣的：

<head> 
    <script>document.addEventListener("touchstart", function(){}, true);</script> 
</head>

像這樣爲您的懸停元素的活性類：

element:hover, element:active { Your CSS }

瞧。

來源

2016-09-08 16:56:01 rufsam

CSS在手機上的下拉菜單。如何避開：hover

回答

相關問題