Heim >Web-Frontend >HTML-Tutorial >麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose
麻烦各位大神看下这个代码错在什么地方了？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:091035Durchsuche
这里特别说明，我做了个批量上传图片的效果，但是现在我要在每个图片右上角增加一个删除叉的小图片，然后点击这个小图片图片自动隐藏，至于删除我会用程序进行实现。不知道哪位大侠给个办法，谢谢了
在网上找了一个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里面了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：解决css设置背景透明，文字不透明_html/css_WEB-ITnoseNächster Artikel：如何控制一个DIV框中的内容，当用户拉浏览器滚动条时，div中的内容可以随之滚动_html/css_WEB-ITnose