Javascript 显示和隐藏悬停按钮

我试图创建一种效果，如果用户将鼠标悬停在我的一个li项目上，我会显示一些隐藏在非悬停状态下的按钮。当你将鼠标悬停在评论上时，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>

var gButtons=$（generateButtons（））；
函数generateButtons（）{
var html=“Btn1Btn2”；
返回html；
}
$（'#myList'）。委托（'li'，'hover'，函数（事件）{
如果（event.type=='mouseover'）{
var元素=$（此）；
gButtons.appendTo（element.children（'.panelButtons'））；
}否则{
gButtons.remove（）；
}
});


胡说八道




废话



...

我的想法是在启动时创建一次gButtons元素。每个li元素都会得到一个类类型为“panelButtons”的空面板。每当用户将鼠标悬停在li元素上时，我只是将其附加到当前悬停元素的空“panelButton”部分

我不确定这是否有效，因为消息的顺序[取消悬停，悬停]必须一致。我希望避免在页面加载时为每个li项生成按钮标记，因为我可能有大量元素——这只是大量额外的内容

这是一个好办法吗，还有更好的模式吗

---

谢谢

我只想做一些简单的事情，大致如下：

  <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的隐藏，等等。

除非有特定的原因需要在每个mouseover/mouseout事件上追加和删除，我想我会按照Derrick的建议执行，只是我会让jQuery为您处理事件

像这样：

$（'#myList'）。委托（'li'，'hover'，函数（事件）{
var元素=$（此）；
如果（event.type=='mouseover'）{
子元素（'.panelButtons'）.show（）；
}否则{
子元素（'.panelButtons'）.hide（）；
}
}).find（“.panelButtons”）
.append（“Btn1Btn2”）.hide（）；​

这样做会更有效率

您甚至可以将代码简化为：

$（'#myList'）。委托（'li'，'hover'，函数（事件）{
$（this）.children（'.panelButtons'）.toggle（event.type=='mouseover'）；
})
.find（“.panelButtons”）
.append（“Btn1Btn2”）.hide（）；​

---

编辑：添加了

event.type==“mouseover”

到

.toggle（）

，正如@Nick Craver所指出的那样。

+1-不要忘记

。toggle（bool）

在这些情况下，它可以减少大量代码：@Nick-+1我喜欢这个想法。我有点担心在这样的情况下，可能会错过一个事件，而切换将被颠倒。

boolean

添加了一个很好的保护。。。还是这样？我想它还记得第一个动作是什么。布尔值实际上只是一个元素[bool？'show'：'hide']（），所以它并不复杂/棘手，只是一种快速减少

.show（）

/

.hide（）

组合的方法：）谢谢@Nick。我现在明白了。我应该看看来源。因此，它是“真”到“显示”的静态映射。不知何故，我认为它考虑了初始状态。因此，它确实为我的偏执心理提供了一种保护o）

$('#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();​

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