javascript - Display a small image at the top-right corner -

ok, want - since i'm not such wizard css - i'll need input...

• i want create new class
• when class applied item (a div or whatever - of adequate dimensions fits), small clickable pre-defined image displayed @ top-right corner inside item

how should go this? ideas?

<div class="hasicon">     <img src="blah.jpg" class="icon" /> </div> 

css:

.icon { display: none; } .hasicon { position: relative; } .hasicon .icon {     display: block;     position: absolute;     top: 0;     right: 0;     width: 32px;     height: 32px;     cursor: pointer; } 

jquery:

$('body').on('click', '.hasicon > .icon', function() {     // }); 

to use this, add class hasicon div. divs without class not display icon.

update:

you try using empty span, if suits requirements better:

<div class="hasicon">     <span></span> </div> 

css:

.hasicon { position: relative; } .hasicon > span {     display: block;     position: absolute;     top: 0;     right: 0;     width: 32px;     height: 32px;     cursor: pointer;     background: url('myimage.png') center no-repeat; } 

jquery:

$('body').on('click', '.hasicon > span', function() {     // });