html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)

【实例简介】

【实例截图】

【核心代码】

删除图标示例

.img-wrap {

position: relative;

display: inline-block;

border: 1px red solid;

font-size: 0;

}

.img-wrap .close {

position: absolute;

top: 2px;

right: 2px;

z-index: 100;

background-color: #FFF;

padding: 5px 2px 2px;

color: #000;

font-weight: bold;

cursor: pointer;

opacity: .2;

text-align: center;

font-size: 22px;

line-height: 10px;

border-radius: 50%;

}

.img-wrap:hover .close {

opacity: 1;

}

×

×

$('.img-wrap .close').on('click', function() {

var id = $(this).closest('.img-wrap').find('img').data('id');

alert('remove picture: ' id);

});