jquery - 使用 CSS 伪元素，插入具有点击处理程序的内容

Question

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

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

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

我想做的是当用户将鼠标悬停在 div 上时，出现 Delete 一词，并且当用户单击 Delete 一词时，我可能会运行一些 jQuery(以实际删除该元素)

这可能吗？

Answer 1

那是不可能的，抱歉。伪元素纯粹用于展示目的。

Yes, i just wanted to avoid extra markup with spans etc...

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

---

如果您真的不想在 HTML 中使用它(也许您有情有可原的情况)，您不妨多使用一点 jQuery:

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

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