Question

I’m doing something very simple, like this:

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

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

What i want to do is when the user hovers over the div, for the word Delete to appear and have it possible that when the user clicks on the word Delete, for me to run some jQuery (to actually remove this item)

Is this possible?

Answer 1

That’s just not possible, sorry. Pseudo-elements are purely for presentation purposes.

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

For something as important as a “Delete” link, the proper place for this to go is in the HTML.

---

If you really don’t want this in the HTML (maybe you have extenuating circumstances), you might as well just do it using a little more jQuery:

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

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