简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose

麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:09976browse

这里特别说明，我做了个批量上传图片的效果，但是现在我要在每个图片右上角增加一个删除叉的小图片，然后点击这个小图片图片自动隐藏，至于删除我会用程序进行实现。不知道哪位大侠给个办法，谢谢了

在网上找了一个css图片右上角加删除叉，拿下来试了下，但是有问题，没有实现删除，我也米看清楚到底是哪出错了？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>商品列表 - <?php echo $_LANG['home'];?></title><meta name="keywords" content="" /><meta name="description" content="" /><link rel="shortcut icon" type="image/ico" href="images/favicon.ico"><style>body{	margin:0;	padding:0;	background:url(../bg.gif) 0 0 repeat #f7f5f5;	color:#333;	font-family:Cambria, Georgia, serif;	font-size:15px;	overflow-x:hidden;}a {	color:black;	text-decoration:none;}a:hover, a:active{	color:black;}/* clearfix */.clearfix {	clear:both;}/* container */#container{	position:relative;	width:1100px;	margin:0 auto 25px;	padding-bottom: 10px;}.grid{	width:188px;	min-height:100px;	padding: 15px;	background:#fff;	margin:8px;	font-size:12px;	float:left;	box-shadow: 0 1px 3px rgba(34,25,25,0.4);	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);	-webkit-transition: top 1s ease, left 1s ease;	-moz-transition: top 1s ease, left 1s ease;	-o-transition: top 1s ease, left 1s ease;	-ms-transition: top 1s ease, left 1s ease;}.border{   box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;	-moz-box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;	-webkit-box-shadow: 2px 2px 3px rgba(34,25,25,0.4) ;  cursor:pointer;      }.grid .closeimg{    position:absolute;	top : -25px;	right : -16px;	width : 50px;	height : 50px;	display:none;}.grid strong {	border-bottom:1px solid #ccc;	margin:10px 0;	display:block;	padding:0 0 5px;	font-size:17px;}.grid .meta{	text-align:right;	color:#777;	font-style:italic;}.grid .imgholder img{	max-width:100%;	background:#ccc;	display:block;}</style>    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>   <script type="text/javascript">        $(document).ready(function () {            //blocksit define            $(window).load(function () {                $('#container').BlocksIt({                    numOfCol: 5,                    offsetX: 8,                    offsetY: 8                });            });            //window resize            var currentWidth = 1100;            $(window).resize(function () {                var winWidth = $(window).width();                var conWidth;                if (winWidth < 660) {                    conWidth = 440;                    col = 2                } else if (winWidth < 880) {                    conWidth = 660;                    col = 3                } else if (winWidth < 1100) {                    conWidth = 880;                    col = 4;                } else {                    conWidth = 1100;                    col = 5;                }                if (conWidth != currentWidth) {                    currentWidth = conWidth;                    $('#container').width(conWidth);                    $('#container').BlocksIt({                        numOfCol: col,                        offsetX: 8,                        offsetY: 8                    });                }            });            //鼠标划过事件            $(".grid").mouseover(function () {                $(this).addClass("border");                //显示删除叉                $(this).find(".closeimg").css("display", "block");            });            $(".grid").mouseout(function () {                $(this).removeClass("border");                //隐藏删除叉                $(this).find(".closeimg").css("display", "none");            });    });    </script></head><body><div id="container">        <div class="grid">            <img src="images/close_pop.png" class="closeimg" alt="删除商品"  />            <div class="imgholder">                <img  src="images/20150104.jpg"    style="max-width:90%" / alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" >            </div>            <strong>日落湖</strong>            <p>                和平日落景观......</p>            <div class="meta">                2013年6月6日</div>        </div>        <div class="grid">         <img src="images/close_pop.png" class="closeimg" alt="删除商品" width="80px" height="80px" />            <div class="imgholder">                <img  src="images/20150104.jpg" / alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" >            </div>            <strong>天国的桥梁</strong>            <p>                桥在哪里？</p>            <div class="meta">                by SigitEko</div>        </div></div></body></html>


回复讨论(解决方案)

或者不用看这个代码，哪位知道怎么给图片右上角加一个删除叉的小图片最好，我就需要的是这种效果，因为我的css技术太差劲了

哪位帮忙下，在下不胜感激 

<div class="pic-show">  <img  src="" / alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" >  <p>x</p></div>


.pic-show{margin:10px;position:relative;width:100px;height:100px;}.pic-show p{position:absolute;width:8px;height:8px;right:-8px;top:-8px;}

补充一下 如果 你要把 P 标签改成 A 标签的话 记得 display:block

嗯，   不知道。。，，，，，，，，，，，，，，

补充一下 如果 你要把 P 标签改成 A 标签的话 记得 display:block


我要点击那个叉的话，图片隐藏该怎么做？

哪位看下这是我实现的效果，现在我想在这个基础上实现多个点击隐藏，但是只能点击一次 

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><style>#pic-show{margin:15px;position:relative;width:100px;height:100px;}#pic-show p{position:absolute;width:8px;height:8px;right:-4px;top:-30px;cursor:hand;}</style><div id="pic-show">  <img  src="images/20150104.jpg"    style="max-width:90%"  style="max-width:90%" / alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" >  <p class="closeimg"><img  src="images/close_pop.png"    style="max-width:90%" alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" ></p></div><div id="pic-show">  <img  src="images/20150104.jpg"    style="max-width:90%"  style="max-width:90%" / alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" >  <p class="closeimg"><img  src="images/close_pop.png"    style="max-width:90%" alt="麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose" ></p></div><script language="javascript">$(function(){ $(".closeimg").click(function(){ $('#pic-show').remove();  });});</script>


$(function(){
 $(".closeimg").click(function(){
 $(this).parent().remove();
  });
});

$(function(){
 $(".closeimg").click(function(){
 $(this).parent().remove();
  });
});


哥们可以隐藏了，能看下这个吗，我上传返回图片排列成这了

这里是CSS
.preview{width:80px;border:solid 1px #dedede; margin:10px 1px 10px 20px;padding:10px;float:left;}
#pic-show{margin:15px 15px 15px 0px;position:relative;float:left;}
#pic-show p{position:absolute;width:8px;height:8px;right:-4px;top:-30px;cursor:hand;}

html 贴下



$(function(){
 $(".closeimg").click(function(){
 $(this).parent().remove();
  });
});


哥们可以隐藏了，能看下这个吗，我上传返回图片排列成这了

这里是CSS
.preview{width:80px;border:solid 1px #dedede; margin:10px 1px 10px 20px;padding:10px;float:left;}
#pic-show{margin:15px 15px 15px 0px;position:relative;float:left;}
#pic-show p{position:absolute;width:8px;height:8px;right:-4px;top:-30px;cursor:hand;}

谢谢，我自己解决了，可能是php输出的json数据，没有接收到样式只有图片，我直接把样式写在JSON里面了

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：解决css设置背景透明，文字不透明_html/css_WEB-ITnoseNext article：如何控制一个DIV框中的内容，当用户拉浏览器滚动条时，div中的内容可以随之滚动_html/css_WEB-ITnose

Related articles

See more