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

Question

我正在做一些非常简单的事情，如下所示：

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

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

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

这可能吗？

Answer 1

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

是的，我只是想避免带有跨度等的额外标记...

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

---

如果你真的不想在 HTML 中这样做（也许你有情有可原的情况），你不妨使用更多的 jQuery 来做到这一点：

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

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

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>

Answer 3

你完全可以做到这一点，尽管我不确定“删除”......你的意思是只是将其从 DOM 中取出吗？如果是这样，这就是您的解决方案。
http://jsfiddle.net/jalbertbowdenii/UVxWq/

好的，这是适合您的规范的解决方案：< a href="http://jsfiddle.net/jalbertbowdenii/UVxWq/" rel="nofollow">http://jsfiddle.net/jalbertbowdenii/UVxWq/ 鼠标悬停时会显示删除，onclick 会删除 .item。没有额外的标记。