CSSについての質問ですが、ボーダーで囲まれたテキトのボタンをCSSで作成しておりますがhoverの時に、その囲んでいるボーダー色を変更したいと思います。 下記のように指定しておりますが、テキストのすぐ外側に改たなボーダー枠が出来てしまい、こちらの色が指定した色になってしまいます。 どなたか良い方法を教えてください。 .menu{ background:url(../img/shard/menu_back.jpg) repeat-x; border:1px solid #CCCCCC; width: auto; text-align:center; font-size: 12px; line-height: 18px; margin: 2px 0px 2px 2px; } .menu a:hover{ margin: 2px 0px 2px 2px; border:1px solid #3773D2; text-decoration: none; }

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/06/08 12:49:37
  • 終了:2006/06/08 14:08:11

回答(1件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522006/06/08 13:43:53

ポイント60pt

menuクラス要素の中にa要素が入っているからではないでしょうか?

.menu {

background:url(../img/shard/menu_back.jpg) repeat-x;

border:1px solid #CCCCCC;

width: auto;

text-align:center;

font-size: 12px;

line-height: 18px;

margin: 2px 0px 2px 2px;

}

.menu:hover{

margin: 2px 0px 2px 2px;

border:1px solid #3773D2;

text-decoration: none;

}

上記の方法、menuクラスにhoverを指定するのが簡単ですが、IE等がa要素以外へのhoverに対応していません。

下記の様に、a要素で全ての装飾をするようにしたほうが良いと思います。


.menu a:link, a:visited {

background:url(../img/shard/menu_back.jpg) repeat-x;

border:1px solid #CCCCCC;

font-size: 12px;

line-height: 18px;

}

.menu a:hover{

border:1px solid #3773D2;

text-decoration: none;

}


これで二重にボーダーが表示されなくなります。

マージン等を取りたい場合には、それぞれにdisplay:block; を追加してブロック要素にすればよいかと思います。

http://yahoo.co.jp/

id:izumi6878

完璧です!大変助かりました。ありがとうございました。

2006/06/08 14:07:00

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません