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

【问题标题】：Using CSS Pseudo Elements, insert content that has a click handler使用 CSS 伪元素，插入具有点击处理程序的内容
【发布时间】：2011-09-15 09:16:48
【问题描述】：

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

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

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

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

这可能吗？

【问题讨论】：

+1 提出一个好问题。我不知道答案。但是，我建议即使它确实有效，也不要这样做，因为如果它是可点击的，那么它不仅仅用于样式，所以它不属于样式表。
是的，我只是想避免使用跨度等进行额外标记...
伪元素不是 DOM 的一部分，所以...

标签： jquery css pseudo-element

【解决方案1】：

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

是的，我只是想避免使用 span 等进行额外标记...

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

如果你真的不希望在 HTML 中出现这种情况（也许你有情有可原），你还不如使用更多的 jQuery：

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

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

【讨论】：

是的，我也同意。如果您需要将处理程序附加到<span class="del" />，那么您肯定需要使用 jQuery 从 DOM 中添加和删除它。
删除按钮的正确位置不一定在标记中，如果没有 JS 或页面重新加载，它将无法工作；通过 JavaScript 添加它更优化。如果您希望您的删除按钮被搜索引擎机器人索引，那么是的，它应该出现在标记中，但我想不出有什么理由迫使您这样做。我并不是说你永远不会希望它们被索引，但很可能有 99% 的时间。此外，如果您将它们放在标记中并遵循 Web 标准，那么该按钮在没有 JavaScript 的情况下仍然可以正常工作，这意味着需要做更多的工作来确保这一点。
无论如何，你不能用伪元素来实现它的原因是因为那些东西纯粹是展示性的。

【解决方案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>

【讨论】：

您应该使用.del 而不是#del。很可能有多个.items。

【解决方案3】：

你完全可以做到这一点，虽然我不确定“删除”....你的意思是把它从 DOM 中取出来？如果是这样，这是您的解决方案。 http://jsfiddle.net/jalbertbowdenii/UVxWq/

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

【讨论】：

有点正确的想法，但是当用户专门单击删除而不是整个元素时，我需要它来操作 jQuery
我不理解你所说的“行动 jQuery”
@albert：他说他希望“仅在单击删除链接时运行 JavaScript/jQuery，而不是在单击任何其余元素时”（在您的解决方案中，单击任何元素的一部分运行代码）。
@三十大声笑。我太笨了。是的，我得到了规范，只是被“行动 jQuery”抛弃了……我的错。谢谢。