cssによる画像リンク枠の色変更

締切済

質問者：midorin_h
質問日時：2008/10/31 23:57
回答数：1件

CSSでリンクが貼られた画像の４隅のボーダーに色を付け、
オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？
一番簡単なＣＳＳを教えて下さい。
ちなみに、下記でやってみましたが、よくわかりません。

<style type="text/css">

</style>
</head>
<body>
<a href="#"><img src="jpg" width="54" height="72" border="0"></a>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2008/11/01 00:17

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;}