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?
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;
}
<span class="del" /> Then you definitely need to go with jQuery for adding and removing it from the DOM.
That's not possible. You can accomplish the desired results in this way: 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 instead of #del. It's likely that there are multiple .items.you can totally do that, although i'm not sure about "delete"....do you mean just take it out of the DOM? if so, here's your solution. http://jsfiddle.net/jalbertbowdenii/UVxWq/
ok, here's the solution for your specification: http://jsfiddle.net/jalbertbowdenii/UVxWq/ delete shows up on hover and onclick deletes the .item. no extra markup.
