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

基本信息

源码名称：图片右上角增加删除图标(css布局示例)

源码大小：1.28KB

文件格式：.html

开发语言：CSS

更新时间：2019-01-13

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除图标示例</title>
<style type="text/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;
}
</style>
</head>
 
<body>
<div class="img-wrap">
    <span class="close">&times;</span>
    <img src="http://lorempixel.com/200/200" data-id="123">
</div>
    
<div class="img-wrap">
    <span class="close">&times;</span>
    <img src="http://lorempixel.com/100/80" data-id="103">
</div>
</body>
<script src="https://www.haolizi.net/skin/js/jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.img-wrap .close').on('click', function() {
    var id = $(this).closest('.img-wrap').find('img').data('id');
    alert('remove picture: '   id);
});
</script>
</html>