- 締切済み
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>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IMG a{は逆です。 これは子孫セレクタという方法で、必ずHTML側の入れ子構造に従わなければなりません。すなわち、 親要素 子要素 の順番になります。（連結は半角スペース） 小さいことですが、HTMLのタグが半角小文字なら、スタイルシート側も半角小文字が良いです。 (注) XHTMLでは、要素名 属性名は半角小文字でなければなりませんので、今から統一しておいたほうが先で直さなくて済む。 a img{} です。 borderは、この場合一括して記述できます。 border: solid 1px fuchsia; /* 順不同 */ また、擬似セレクタも下記の順番で設定しておきましょう。 a img:link {} a img:visited {} a img:hover {} a img:active {} a[name] img:hover { color: inherit; background-color: inherit;} これらは、上書きしたいプロパティだけでよいです。カスケード(継承)されますから、Cascading Style Sheetsはカスケードが一番のポイント。 その結果 a img{ border:solid 1px red ridge;} a img:link { border-color: fuchsia;} a img:visited { border-color: maroon;} a img:hover {} /* この場合redが継承される */ a img:active { border-color: yellow;} a[name] img:hover { color: inherit; background-color: inherit;}
