懸停時顯示和隱藏按鈕

我試圖創建一個效果，如果用戶將鼠標懸停在我的一個項目上，我會顯示一些隱藏在非懸停狀態下的按鈕。當您將鼠標懸停在評論上時，youtube也會做同樣的事情。我試試這個：懸停時顯示和隱藏按鈕

var gButtons = $(generateButtons()); 

function generateButtons() { 
    var html = "<span>Btn1</span><span>Btn2</span>"; 
    return html; 
} 

$('#myList').delegate('li', 'hover', function(event) { 
    if (event.type == 'mouseover') { 
     var element = $(this); 
     gButtons.appendTo(element.children('.panelButtons')); 
    } else { 
     gButtons.remove(); 
    } 
}); 

<ul id='myList'> 
    <li> 
    <p>blah a</p> 
    <p class='panelButtons'></p> 
    <li> 
    <li> 
    <p>blah b</p> 
    <p class='panelButtons'></p> 
    <li> 
    ... 
</ul>

好吧，所以我的想法是，我在創建時創建gButtons元素。每個li元素都有一個類型爲「panelButtons」的空面板。每當用戶將鼠標懸停在li元素上時，我只是將其附加到當前懸停元素的空'panelButton'部分。

我不確定這是否會工作，因爲消息[un-hover，hover]的順序必須一致。我想避免在頁面加載時爲每一個li項目生成按鈕標記，因爲我可能有大量的元素 - 它只是很多額外的內容。

這是一個好方法去解決它，任何更優化的模式？

謝謝

來源

2010-07-30 user246114

除非有一些具體的原因，爲什麼你要附加和刪除每個mouseover/mouseout事件，我想我會喜歡德里克建議，除了我會有jQuery手柄爲你的事件。

像這樣：http://jsfiddle.net/dFFqZ/

$('#myList').delegate('li', 'hover', function(event) { 
    var element = $(this); 
    if (event.type == 'mouseover') { 
     element.children('.panelButtons').show(); 
    } else { 
     element.children('.panelButtons').hide(); 
    } 
}).find('.panelButtons') 
    .append("<span>Btn1</span><span>Btn2</span>").hide();

這將是多更有效地做這種方式。

你甚至可以簡化代碼到這一點：http://jsfiddle.net/dFFqZ/1/

$('#myList').delegate('li', 'hover', function(event) { 
    $(this).children('.panelButtons').toggle(event.type == 'mouseover'); 
}) 
    .find('.panelButtons') 
    .append("<span>Btn1</span><span>Btn2</span>").hide();

編輯：新增event.type == 'mouseover'到.toggle()由@Nick Craver指出。

來源

2010-07-30 00:40:58 user113716

+1 - 不要忘了'.toggle（bool）'在這些情況下也是如此，它可以減少很多代碼：http://jsfiddle.net/nick_craver/dFFqZ/2/ – 2010-07-30 01:02:46

@Nick - +1我喜歡這個想法。在這樣的情況下，我有點擔心，可能會錯過一個事件，並且切換最終會被顛倒。 'boolean'增加了一個很好的保護措施......或者它呢？我認爲它記得第一個動作是什麼。 – user113716 2010-07-30 01:09:48

布爾實際上只是一個'elem [布爾？ 'show'：'hide']（）'，所以它沒什麼複雜/棘手，只是一種快速減少'.show（）'/'hide（）'組合的方法:) – 2010-07-30 01:27:47

我只是做一些簡單的，沿着線的東西：

<a href="vote" onmouseover="$('reg').show();">Vote Up</a><br /> 
    <div id="reg" style="display:none">Login or Register to vote</div>

你需要一些代碼，以延緩的onmouseout，並取消reg的藏身div如果你懸停在註冊等

來源

2010-07-30 00:30:53 Derrick

懸停時顯示和隱藏按鈕

回答

相關問題