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

我在做一些非常简单的事情，比如：

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

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

你好，我是一个项目
。项目：悬停：在{
内容：“删除”；
}

我想做的是，当用户将鼠标悬停在div上时，Delete这个词就会出现，并且当用户单击Delete这个词时，我可能会运行一些jQuery（以实际删除此项）

---

这可能吗？

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

HTML:

布拉布拉
删除

对不起，这是不可能的。伪元素纯粹用于表示目的

---

是的，我只是想避免使用跨距等额外标记

对于像“删除”链接这样重要的内容，正确的位置是在HTML中

---

如果您真的不希望HTML中出现这种情况（可能您有一些情有可原的情况），那么您最好使用更多的jQuery：

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

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

$（'Delete'）。附加到（'.item'）。单击（函数（）{
警报（“已删除”）；
});
德尔先生{
显示：无；
}
.item:hover.del{
显示：内联；
}

您完全可以这样做，尽管我不确定“删除”…您的意思是将其从DOM中删除吗？如果是这样，这是你的解决方案。

---

好的，下面是针对您的规范的解决方案：delete显示在hover上，onclick删除.item。没有额外的标记

一个好问题+1。我不知道答案。但是我建议，即使这样做确实有效，也不是一个好主意，因为如果它是可点击的，那么它就不只是用于样式设置，所以它不属于样式表。是的，我只是想避免带有跨距等的额外标记…伪元素不是DOM的一部分，所以…你应该使用

.del

而不是

#del

。很可能有多个

.item

s。是的，我也同意。如果您需要将处理程序附加到

，那么您肯定需要使用jQuery在DOM中添加和删除它；通过JavaScript添加它更为理想。如果你想让你的删除按钮被搜索引擎机器人编入索引，那么是的，它应该出现在标记中，但我想不出有什么理由强迫你这么做。我并不是说你永远都不想让它们被索引，但很可能99%的时间都是这样。此外，如果您将它们放在标记中并遵循Web标准，那么按钮在没有JavaScript的情况下仍应在功能上工作，这意味着需要更多的工作来确保这一点。无论哪种方式，您不能使用伪元素实现这一点的原因都是因为这些东西纯粹是表示性的。这是一种正确的想法，但是我需要它在用户特别单击删除时操作jQuery，而不是整个元素我不理解你所说的“操作jQuery”@albert:他说他想“只在单击删除链接时运行JavaScript/jQuery，而不是在单击元素的任何其他部分时运行”（在您的解决方案中，单击元素的任何部分都会运行代码）。@Three lolz。我太笨了。是的，我得到了规范，只是被“action the jQuery”甩了……我的错。thx。

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

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

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