ホームページ > 記事 > ウェブフロントエンド > このコードのどこが間違っているのか教えていただけますか? _html/css_WEB-ITnose
このコードのどこが間違っているのか教えていただけますか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:09976ブラウズ
ここで特別な注意点として、バッチアップロードエフェクトを作成しましたが、各画像の右上隅に削除バツ印のある小さな画像を追加し、この小さな画像をクリックして自動的に非表示にしたいと思います。プログラムを使って実装していきます。ヒーローが解決策を教えてくれるかどうかわかりません、ありがとう
インターネットで右上隅に削除バツが付いた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();
})
});
返された写真をアップロードして整理したので見てもらえますか?こんな感じです
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();
});
});
今すぐ非表示にできます。これを見てもらえますか? 返された画像をアップロードしてこのように配置しました
.preview{width:80px;border:solid 1px #dedede; 20px;パディング: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;}
ありがとう、私はそれを自分で解決しました、それはスタイルではなく画像だけを受け取ったかもしれません。 JSONに直接スタイルを書きました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。