CSSテクニックコミュの画像に1pxのボーダー

画像に1pxのボーダーをつけたいんです。

要するに、何がしたいかと言うと
・通常時は1px枠をつける
・マウスオーバー時は白の1pxボーダーをつける

実際、自分でもやってみたんですが・・・
------------------------------------
a:link{
padding:1px;
}

a:hover{
border : 1px solid #FFFFFF;
padding:0px;
}
a:visited{
padding:1px;
}

------------------------------------
上記のCSSソースでした場合、
WinはOKだったんですが、
その他のブラウザにボーダーが適用されません。

Win IE6 ○
Win Firefox1.5 ×
Mac safari2.0 ×
Mac Firefox1.5 ×

どなたか、教えて頂けないでしょうか？

コメント(5)

最初
全て
最新の40件

[2] mixiユーザー 06月06日 17:21

a{
display:block;
}
a:link,a:visited{
border : 1px solid #000000;
}
a:hover{
border : 1px solid #FFFFFF;
}

でどうですか？
-----------------
a:link{
padding:1px;
}
-----------------
paddingじゃボーダーは出来ません。
また、aタグはインライン要素なので、ブロック要素にしたほうが無難。
インライン要素のボーダーはブラウザごとにかなり違った気がします。。

[3] mixiユーザー 06月06日 17:40

初めまして。
僕もCSSにあまり詳しくないので参考になるかわかりませんが、一応書かせて頂きます。

内容的にはすろさんの方法がベストだと思います。
ここからは余談になりますが、widthやheightといったサイズも入れると画像にフィットすると思います。
その際には

div#img a:link{

と言ったように他のリンクへも影響が無い様にすると良いかもしれません。

[4] mixiユーザー 06月06日 19:15

a:visited と a:hover を書く順序が違います。

a:link
a:visited
a:hover

の順序で書かないと、意図した動作にはなりません。
詳しくは下記のリンクを参照してください。
http://www.mozilla.gr.jp/standards/webtips0012.html

[5] mixiユーザー 06月06日 21:13

皆さんありがとうございます！

すろさんのそのまま使わせて頂きました！
山さんwidthやheightを入れなくても意図したとうりにCSSが適用されました。（本当は入れた方がいいのかもしれませんが・・・）

皆さん本当にお手数おかけしました。

ログインすると、みんなのコメントがもっと見れるよ