【实例简介】
【实例截图】
【核心代码】
删除图标示例.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);
});
更多推荐
html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)
发布评论