- ベストアンサー
css：リンク画像の枠消し： a img { border:none} にしてもダメ
リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。 下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。（色番号は長くなるので#だけにしています）a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。 どなたかお分かりになったら助けてください！ .entry-body a { color:#; background-color:#; border-bottom:1px #;} .entry-body a img { background-color:transparent; border-bottom:none;}
- asummer
- お礼率74% (52/70)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
だいぶ端折って書きますが・・・。 こちらの環境firefox2 【引用開始】 <body> <p class="entry-body"> <a href="#">hogehgeohgoe</a> ぱたーんいち<a href="#">abc<img src="hogege.gif">def</a><br> ぱたーんに<a href="#"><img src="hogege.gif"></a> </p> </body> 【引用終り】 もし「ぱたーんいち」のようにhtmlを書いているのでしたら、abcdefの部分に<a>に設定したcssが適用されます。<a><a/>の間に<img>ありますので・・・。「ぱたーんに」なら少なくとも背景については表示されないはずです。
その他の回答 (2)
- dezimac
- ベストアンサー率56% (2365/4208)
リンクテキストに下線を付けたいのなら、border-bottomではなく、 「text-decoration:underline;」と指定した方がいいですよ。 a {text-decoration: underline;} a img {border: none;} でうまくいきませんか？
お礼
おお！これなら、うまく、いきます！！ …ただ、リンクテキストは、paddingとmarginをとって背景色つけて、ちょっと目立つようにしてるんです。なので、underlineではなく、borderにしたくて。。何故、borderにすると、imgのスタイル指定が効かなくなるのっっと長時間なやんでいます(--;
補足
（お礼を書いた後ですが） あ！ 肝心なことを、質問文に書いていなかったことが分かりました。。 a に、paddingとmarginがとってあるってことは、 a img の a に、borderと背景が表示されてるってことですね！ 初歩的なミス。。面倒ですが、 a img をdivでくくって、class作ろうと思います。多分それでうまくいきそう。ありがとうございます！
a img だから効かないのかも a img の状態で 逆に border:5px とかやって効くようなら border:0px にしたらどうなるかな
補足
早速ありがとうございます！ ＞逆に border:5px とかやって効くようなら するどい。。効かないんです、それが。borderの幅はテキストリンク a のもの（1px）が適用されてます。
関連するQ&A
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS アンカーの画像の回りが色枠で囲まれてしまう
<a>タグでリンクボタン（画像）を作りました。 ソースはこんな画像とURLを指定したのみです。 <a href="http://xxxxx/"><img src="/image/menu01.gif"></a> ブラウザで見ると、画像の周りが青枠で囲まれてしまっています。 （一度、クリックすると赤っぽい色に、その枠の色が変わります） 既存のページを元にHTMLを作成しているのですが、たぶん、定義して ある CSS or javascript などの設定ファイルが悪さをしているような気がしていますが、何が原因か分かりません。 そのHTMLに指定してあるCSSをコピペさせていただきますが、どこが原因か分かりますか？ そのほか、怪しいところがありましたら、ご指摘ください。 よろしくお願いいたします。 ----style.css--- body { background-color: #ffffff; background-repeat: no-repeat; font-family: Arial, Verdana; font-size: 14px; font-style: normal; font-weight: normal; /* color: #333333; */ /* margin-top: 10px; */ /* margin-left: 10px; */ /* margin-right: 10px; */ /* margin-bottom: 10px; */ } /* Style for in-page header of the generated rowset pages */ .pagehead { font-size: 16px; font-weight: bold; } /* Table row style referenced in generated various generated pages */ .tablebody { /* background-color: #CCDDEE; */ color: #111111; font-size: 14px; text-align: left; vertical-align: middle; padding: 5px 10px 5px 10px; } /* Default grid header and footer style for generated rowset pages */ .gridStyle-tr-header, .gridStyle-tr-footer { background-color: #CCDDEE; color: #555588; font-size: 14px; text-align: left; vertical-align: baseline; line-height: 18px; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 10px; } /* Grid base row default style for generated rowset pages */ .gridStyle-tr-data { background-color: #FFFFFF; color: #111111; font-size: 14px; text-align: left; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 12px; } /* Grid alternate row default style for generated rowset pages */ .gridStyle-tr-alt-data { background-color: #CCDDEE; color: #111111; font-size: 14px; text-align: left; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 12px; } /* Used for prompts in generated pages */ .prompt { color: #993333; font-style: italic; } A:link, A:visited, A:active { color: #7777AA; text-decoration: underline; } A:hover { color: #9999FF; background: transparent; text-decoration: underline; } ----common.css--- body { color:#111; background-color:#777; margin:0; } form { margin:0; } a { color:#111; } a:hover, a.Hover { color:#666; } a.My { color:#25a; } a.My:hover, a.MyHover { color:#58d; }
- ベストアンサー
- HTML
- CSS:a imgのリンクの枠を消したい
http://okwave.jp/qa/q3061773.html ↑この質問と同じなのですが、解決方法が分からなかったので質問させてください。 a,a hover で指定してある枠の色が a imgにも出来てしまい困っています。 a img{ border:none; } と設定していますが、だめです。 それと、この箇所は <div class="thumb"> <table border="0"> <tr> <td class="v3"> <a onclick="btp01.src='img/001.jpg'" ondblclick="btp01.src='img/001.jpg'" style="cursor:pointer"> <img src="img/bt_1-s.jpg" class="photo_s" alt="" width="85" height="85" /></a> </td> </tr> </table> </div> というHTMLの記述なのですが、画像の右側に設定していない余白が出来てしまいます。 どうしたら良いでしょうか。
- 締切済み
- CSS
- cssによる画像リンク枠の色変更
CSSでリンクが貼られた画像の４隅のボーダーに色を付け、 オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？ 一番簡単なＣＳＳを教えて下さい。 ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css"> <!-- IMG a{ border-width : 7px 7px 7px 7px;border-style : solid solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia; } --> </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>
- 締切済み
- HTML
- リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
- [css] a:hoverの背景画像に半透明PNGを使いたい
いつもありがとうございます。 IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。 そもそものやりたいことは、 【画像Ａ（normal.jpg）にマウスオーバーすると、（透明度15%白色の画像がかかり）少し白っぽくなる】 です。画像Ａにはリンクを張ります。 下記のように、背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしました。 firefoxなどではうまく行きました。 IE用に、AlphaImageLoaderを使ったのですが、ダメです。（効いてない時と同じ、薄い青グレーになります） ブロック要素にしかダメらしいので、くどくdisplay:blockを使ったのですが… どなたか解決策、教えていただけませんか！！？？ ※画像Ａと、画像Ａに白みがかった画像Ｂをつなげて縦長にして、 hoverでズラす方法は、無しでお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <style> * { margin: 0; padding: 0; border: 0; text-decoration: none; background: transparent; } #trans { width: 100px; height: 100px; background: url(img/normal.jpg) 0 0 no-repeat; } #trans a { display: block; width:100px; height:100px; background: none; } #trans a:hover { background: url(img/trans.png) 0 0 no-repeat; } * html #trans a:hover { display: block; width:100px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/trans.png', sizingMethod='scale'); } </style> </head> <body> <div id="trans"> <a href="#">あああ</a> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。
テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。
- ベストアンサー
- HTML
- styleタグとbodyタグの関係について分かりません・・・
スタイルシートの中にbodyを入れた場合、</html>の前に</body>は必要でしょうか？それとも不要でしょうか？ 下記のタグはマウスオーバーで画像の濃さを変えるようにしたかったため、サイトより転用しました。 スタイルの中にbodyタグを入れる意味はどういった利便性がありますか？ <style type="text/css"> <!-- body { margin-left: 2em; margin-right: 2em; style: overflow-x:hidden; color: black; background: #FFFFFF; } a:link { color: blue; } a:visited { color: purple; } h1 { font: bold 1.5em Verdana; } a img { filter: Alpha(Opacity=100); -moz-opacity: 1.5; border-style: none; } a:hover img { filter: Alpha(Opacity=50); -moz-opacity: 0.5; } --> </style> ご存知の方教えてください！
- ベストアンサー
- HTML
- スタイルシートで。。
こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか？ ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか？ 教えてください、よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
★★No.2さんのお礼に書いたように、a img をdivでくくったら、できました。。ダサくて悲しいんですけど。。お騒がせしました。
補足
ですよね？？ ぱたーんに、で書いているのに、背景もborderも、テキストリンクと同じになるんです。No.2さんがコメントくださったように、テキスト＝underline、画像＝border:none、にすれば、それぞれ正しく表示されるのに。もう、何が何だか分かりません。