Home >Web Front-end >HTML Tutorial >Could you please tell me what is wrong with this code? _html/css_WEB-ITnose
Could you please tell me what is wrong with this code? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:091035browse
Special note here, I made a batch upload effect, but now I want to add a small picture with a delete cross in the upper right corner of each picture, and then click on this small picture to automatically hide it. As for deletion, I will use a program To implement. I don’t know if any hero can give me a solution, thank you
I found a css image on the Internet with a delete cross in the upper right corner, took it out and tried it, but there was a problem and the deletion was not implemented. I couldn’t see it clearly. What went wrong?
<!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" width="175px" /> </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" /> </div> <strong>天国的桥梁</strong> <p> 桥在哪里？</p> <div class="meta"> by SigitEko</div> </div></div></body></html>
Reply to discussion (solution)
Or without looking at this code, does anyone know how to add a delete to the upper right corner of the image? Small pictures with crosses are best. This is what I need, because my css skills are too bad
Anyone can help, I would be very grateful
<div class="pic-show"> <img src="" /> <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;} Just to add, if you want to change the P tag to an A tag, remember display:block
Hmm, I don’t know. . ,,,,,,,,,,,,,,
To add, if you want to change the P tag to the A tag, remember display:block
I want to click that If so, what should I do to hide the picture?
Can anyone take a look at the effect I achieved? Now I want to hide multiple clicks on this basis, but I can only click once
<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" width="100" height="100" /> <p class="closeimg"><img src="images/close_pop.png" width="30"></p></div><div id="pic-show"> <img src="images/20150104.jpg" width="100" height="100" /> <p class="closeimg"><img src="images/close_pop.png" width="30"></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( ; > .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 paste
$(function(){
$(".closeimg").click(function(){
$(this ;
Here is the 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;}
Thank you, I solved it myself. It may be the json data output by php. I did not receive the style but only the image. I wrote the style directly in JSON