ここで特別な注意点として、バッチアップロードエフェクトを作成しましたが、各画像の右上隅に削除バツ印のある小さな画像を追加し、この小さな画像をクリックして自動的に非表示にしたいと思います。プログラムを使って実装していきます。ヒーローが解決策を教えてくれるかどうかわかりません、ありがとう
インターネットで右上隅に削除バツが付いた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" 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>
または、このコードを見ずに、画像の右上隅に削除バツ印のある小さな画像を追加する方法を誰が知っていますか? これが私が必要とする効果です。なぜなら、私の CSS 技術はとても悪いです
誰かが私を助けてくれれば、とても感謝しています
<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;}付け加えておきますが、P タグを A タグに変更したい場合は、次のように表示することを忘れないでください。ブロック
まあ、わかりません。 。 、、、、、、、、、、、、、、
P タグを A タグに変更したい場合は、display:block を覚えておいてください
誰か私が達成した効果を見てもらえませんか? ここで、これに基づいて複数のクリックの非表示を実装したいと思いますが、クリックできるのは 1 回だけです
<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();
})
});
html 貼り付け
$(function(){
$(".closeimg").click(function(){
$(this).parent().remove();
});
});
今すぐ非表示にできます。これを見てもらえますか? 返された画像をアップロードしてこのように配置しました
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
