display：none在觸摸屏設備上的懸停技巧

我正在使用CSS懸停技巧來清理我的界面。只有當光標懸停在元素內時，控件纔會顯示。在觸摸屏設備上使用界面時遇到問題。如果控制按鈕未顯示display:none，並且我觸摸它應該在的位置，則該按鈕仍會觸發該事件。display：none在觸摸屏設備上的懸停技巧

試試這個小提琴在您的瀏覽器和觸摸屏設備上既要明白我的意思... http://jsfiddle.net/6PvCn/2/

在觸摸屏設備，觸摸紅色正方形和警告應該火，沒有按鈕甚至流露出向上。我在桌面Android模擬器和真正的Android 2.3手機上都測試了這一點。

我要去的效果是，即使用戶觸摸按鈕「是」的位置，按鈕也不會被觸發顯示。

我寧願在使用javascript之前使用純粹的CSS解決方案。

來源

2013-03-11 parker.sikand

我剛剛在我的真實設備上測試過它，它確實執行按鈕的操作。你也許可以嘗試使紅色方塊成爲圖像，並通過Javascript的onclick將圖像更改爲按鈕。如果我時間不夠，我會爲您提供一些代碼。

來源

2013-03-11 18:32:36 TimeWasterNL

沒關係我可以管理該代碼。 – 2013-03-11 18:39:37

你不能用純CSS做到這一點，點擊按鈕會將按鈕置於懸停狀態並觸發點擊事件。相反，你應該激活按鈕。

來源

2013-03-11 18:33:45

太糟糕了。 IMO這是一個應該由CSS處理的用例。 – 2013-03-11 18:41:44

您能否提供解決方案的簡要代碼片段？ – 2013-03-11 19:10:57

解決辦法，取出JS onclick，將按鈕封裝在錨點中，懸停狀態顯示它，使用href觸發操作。 – 2013-03-11 20:54:50

嘗試pointer-events: none;隨着display: none;

來源

2013-03-11 18:34:13 mgrahamjo

我讀過這不支持在IE瀏覽器。 IE對我來說不是什麼大問題，因爲IE上的用戶無論如何都應該在桌面上。但Windows手機上的支持如何？ – 2013-03-11 18:42:58

這裏是我想出了... http://jsfiddle.net/6PvCn/7/

在Android觸摸屏解決方案（不知道IOS）中，hover事件隱藏元素如果沒有顯示，不會被解僱。所以基本上我檢查是否hovered之前它是clicked。

簡而言之

$(".hidden").hover(function(e) { 
    if(e.type == "mouseenter") $(this).addClass("hovering"); 
    else      $(this).removeClass("hovering"); 
}).click(function(e) { 
    if(!$(this).hasClass("hovering") return false; 
});

小提琴解釋了更復雜的情況，我與表單元素和動態添加內容。它提供了一個通用的解決方案，而不是這個特定的元素。

來源

2013-03-13 17:38:27

我並不特別喜歡這個解決方案，所以如果有人有更好的想法，讓我們聽聽他們！ – 2013-03-13 17:39:58

display：none在觸摸屏設備上的懸停技巧

回答

相關問題