jquery - 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/

わかりました、ここにあなたの仕様の解決策があります: http://jsfiddle.net/jalbertbowdenii/UVxWq/ 余分なマークアップはありません。