javascript - 鼠标悬停在 div 上编辑链接

Question

例如在 facebook 上 - 当您将鼠标悬停在新闻项上时，会出现一个删除按钮。我该如何着手实现这一目标？

谢谢， 艾略特

Answer 1

现代浏览器

在现代浏览器中，您可以在我们的选择器中利用 :hover 伪类。例如，考虑以下标记:

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

默认情况下，我们希望隐藏 .adminControls。但是，一旦用户将鼠标悬停在 .item 元素上，它们就应该变得可见:

.item .adminControls {
    display: none;
}

.item:hover .adminControls {
    display: block;
}

JavaScript 和 jQuery

如果您使用 jQuery ，您可以使用 $.hover() 方法轻松完成此操作。如果您使用的是 Prototype，您可以获得 protoHover plugin获得相同的结果，或查看 this blog post .

$("div.item").hover(
  function () { $(this).find(".adminControls").show(); }, 
  function () { $(this).find(".adminControls").hide(); }
);

这将实现以下显示/隐藏效果:

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>