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

Question

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

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

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

我想要做的是当用户将鼠标悬停在 div 上时，会出现 Delete 一词，并且当用户单击 Delete 一词时，我可能会运行一些 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/

好的，这是您的规范的解决方案：http: //jsfiddle.net/jalbertbowdenii/UVxWq/ 删除显示在悬停和onclick 删除.item。没有额外的标记。