使用CSS伪元素，插入具有单击处理程序的内容。

Question

我正在做一些非常简单的事情，就像这样：

<div class='item'>HI I'm an item</div>

.item:hover:after {
content: "Delete";
}

我想做的是当用户悬停在div上时，让“删除”这个词出现，并使用户点击“删除”时我可以运行一些jQuery代码（实际上删除此项）。

这可行吗？

- benhowdle89

---

对于一个好问题点个赞。我不知道答案。但是我建议即使它能够工作，也不要这样做，因为如果它是可点击的，那么它不仅仅是用来进行样式设计的，所以它不应该出现在样式表中。 - Spudley

是的，我只是想避免使用额外的标记，例如spans等等... - benhowdle89

伪元素不是DOM的一部分，因此... - BoltClock

Answer 1

很抱歉，这是不可能的。伪元素仅用于呈现目的。

是的，我只是想避免使用额外的标记，如 span 等。

对于像“删除”链接这样重要的东西，它应该放在 HTML 中的适当位置。

如果您真的不想将其放在 HTML 中（也许您有特殊情况），那么最好还是使用更多的 jQuery 来完成它。

$('<span class="del">Delete</span>').appendTo('.item').click(function() {
    alert('deleted');
});

.del {
    display: none;
}
.item:hover .del {
    display: inline;
}

- thirtydot

---

是的，我也同意。如果您需要将处理程序附加到<span class="del" />，那么您肯定需要使用jQuery来添加和从DOM中删除它。 - Robin Maben

删除按钮的适当位置不一定在标记中，如果没有JS或页面重新加载，它将无法工作；通过JavaScript添加更为优化。如果您希望搜索引擎机器人索引您的删除按钮，则应该将其放在标记中，但我想不出任何理由会迫使您这样做。我并不是说您永远不会想要对它们进行索引，但很可能99%的时间都不需要。此外，如果您将它们放在标记中并遵循Web标准，则按钮仍应该在没有JavaScript的情况下正常工作，这意味着需要更多的工作来确保它能够正常工作。 - albert

无论如何，您无法使用伪元素来实现此功能的原因是因为这些东西纯粹是呈现性的。 - BoltClock

Answer 2

这是不可能的。您可以通过以下方式实现所需的结果： CSS：

.item > .del {
    /* "A > B" means: Select element B which is the direct child of A.
     * You surely don't want all nested .del elements to collapse. */
    width: 100px;
    height: 30px;
    display: none;
    /*Additional styles*/
}
.item:hover > .del{
    display:inline-block;
}

HTML：

<div class="item">
   Blabla
   <div class="del" onclick="doSomething()">Delete</div>
</div>

- Rob W

---

你应该使用.del而不是#del。很可能有多个.item。 - thirtydot

Answer 3

你完全可以这样做，不过我不确定你所说的“删除”是什么意思...你是指将其从DOM中移除吗？如果是这样，这里有你的解决方案。http://jsfiddle.net/jalbertbowdenii/UVxWq/

好的，这是符合你要求的解决方案：http://jsfiddle.net/jalbertbowdenii/UVxWq/ 鼠标悬停时会显示删除按钮，点击后会删除.item。没有额外的标记。

- albert

---

有点正确的想法，但我需要它在用户特定点击删除时执行jQuery，而不是整个元素。 - benhowdle89

我不明白你所说的“执行jQuery”的意思。 - albert

@albert：他的意思是希望“仅在单击删除链接时运行JavaScript/jQuery，而不是单击元素的任何其他部分”（在您的解决方案中，单击元素的任何部分都会运行代码）。 - thirtydot

@thirty 哈哈。我太蠢了。是的，我已经收到了规范，只是被“执行jQuery”的说法搞糊涂了……我的错。谢谢。 - albert