前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >图片选中效果 css

图片选中效果 css

作者头像
week
发布2018-08-27 10:10:29
4.6K0
发布2018-08-27 10:10:29
举报
文章被收录于专栏:用户画像

一、图片选中效果图:

二、CSS

代码语言:javascript
复制
<style>  
.pic_box{ width:900px;}  
.pic_box li{ width:204px; height:154px;list-style-type:none; float:left; margin:16px; border:2px solid; border-color: #FFFFFF; position:relative}  
.dele_pic{top:0px; position:absolute; left:167px; width:30px; height:30px; display:none;}  
</style>  

三、JS

代码语言:javascript
复制
<script>

     $(".show_pic").click(function(){  
            if($(this).parent().find(".dele_pic").css("display") == "none"){ 
                $(this).parent().css("border-color","#33FF00").find(".dele_pic").show();  
            }else{
            	$(this).parent().css("border-color","#fff").find(".dele_pic").hide();  
            }  
     })  
</script>

四、FTL

代码语言:javascript
复制
<div class="pic_box">  
<ul>
    <li>  
        <img class="show_pic" style="width:200px;height:150px"  src="${picture.pictureUrl}"/>
	<img class="dele_pic" src="${ctxPath}/resources/assets/img/hongcha.png"  
         onClick="delcfm('${ctxPath}/newcar/picture/delete?type=${type?default('')}&pictureId=${picture.id}&newcarId=${newcar.id?default('')}')"/>  
    </li>  
		                		
</ul> 
</div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015年10月29日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档