找传奇、传世资源到传世资源站!

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

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

from clipboard<!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.5t6t.com/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>

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复