Question

我正在尝试创建一种效果，如果用户将鼠标悬停在我的某个项目上，我会显示一些隐藏在非悬停状态的按钮。当你将鼠标悬停在评论上时，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项目生成按钮标记，因为我可能有大量的元素 - 它只是很多额外的内容。

这是一个可行的方法吗，更优化的模式？

谢谢

Answer 1

除非你想在每次mouseover / mouseout事件中追加和删除一些特定的原因，我想我会像Derrick建议的那样，除了我有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();

编辑： @Nick Craver 指出，event.type == 'mouseover'已添加到.toggle()。

Answer 2

我只是做一些简单的事情，其中包含以下内容：

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

你需要一些代码来延迟onmouseout，如果你将鼠标悬停在reg等上，则取消隐藏reg div。

在悬停时显示和隐藏按钮

2 个答案: