编辑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插件来获得相同的结果,或者查看这篇博文.

$("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>