懸停彈出，與菜單

我被問及最優雅的解決方案jQuery中的代碼是這樣的懸停彈出，與菜單

http://jsfiddle.net/lucaguglielmi/z3PKm/

當然有鼠標，你應該能夠懸停在彈出式窗口，單擊在一個按鈕上。

優雅的手段乾淨的代碼具有良好的perfrmace和最高的可用性，沒有鼠標輸入/輸出錯誤。用戶應該有一些時間回到彈出如果他鼠標懸停的錯誤，沒有其他插件，然後jQuery。

我們還可以更改HTML，但3個按鈕必須留下來。

有關如何進行的任何建議？使用計時器可能？

預先感謝

來源

2012-09-20 Luca Guglielmi

http://jsfiddle.net/z3PKm/12/

添加一些彈出規則，在彈出菜單本身（它已經被觸摸按鈕）（使用一個div包裹，使之透明，並進一步將以上按鈕） - 或使用超時功能關閉.choose

的這是最簡單的解決方案，我認爲

來源

2012-09-20 18:19:17 Xhynk

我與UX元素這樣的經驗是，它會導致用戶受挫;所以您可能需要重新考慮您的方法，以便有另一種顯示不依賴於元素懸停的兩個按鈕的方式。另一個贊成重構設計的理由是，它不適用於平板電腦或手機等觸摸設備，因爲沒有「懸停」的概念。

但是，如果你想做到這一點，使用計時器是您最好的選擇，我想。 Alex的解決方案通過消除按鈕和容器之間的間隙來工作，但這也可能導致沮喪：例如，如果用戶的鼠標位於按鈕上方，然後沿對角線向上到達現在可見的容器，則先傳遞背景，容器會消失。另外，從設計的角度來看，消除兩個元素之間的視覺差距可能並不理想。

這不只是使用setTimeout一件簡單的事情，但是，因爲如果你將鼠標懸停在該按鈕，然後上去彈出，但它仍然會如果你不按任何按鈕足夠快消失。所以當他們進入彈出窗口時，還必須使用clearTimeout，並且大概在他們離開彈出窗口時隱藏彈出窗口。所以，在這裏就是你需要：

首先聲明一個變量來保存超時ID（我用簡單起見一個全局變量，但你可能要在你的元素之一使用屬性代替）：

var hidePopupTimeoutId;

然後修改.choose事件，像這樣：

$(".choose").live("mouseover", function() { 
    // no need to check if hidePopupTimeoutId is undefined; clearTimeout 
    // will fail silently 
    clearTimeout(hidePopupTimeoutId); 
    $(".popup").show(); 
}); 


$(".choose").live("mouseout", function() { 
    // we don't hide the popup immediately, but give the user a reasonable 
    // amount of time to mouse over it 
    hidePopupTimeoutId = setTimeout(function() { 
     $(".popup").hide(); 
    },500); 
});

請注意，我們必須清晰地在mouseover事件超時：否則，如果你將鼠標放在按鈕，鼠標移出，然後鼠標背部過來，這即使y也會消失我們的鼠標在按鈕上方！

接下來，我們添加一些邏輯，以確保彈出保持可見，如果鼠標在它：

$(".popup").live("mouseenter", function() { 
    clearTimeout(hidePopupTimeoutId); 
}); 


$(".popup").live("mouseleave", function() { 
    $(".popup").hide(); 
});

請注意，我們使用jQuery的mouseenter和mouseleave事件，而不是mouseover和mouseout;這是因爲mouseout將鼠標懸停在某個彈出窗口的子元素（如按鈕）上時會被調用，並且彈出窗口將消失！

而你有它。這是一個jsFiddle演示：http://jsfiddle.net/z3PKm/15/

來源

2012-09-20 18:51:18

懸停彈出，與菜單

回答

相關問題