a:linlk ＢＯＸの背景に色をつけたい

質問

http://www.boxicon.com/のサイトのようにリンク部分にカーソルを合わせたときに背景の色が変わるようにしたいです。

自分でいろいろやっているのですが「a:hover」などを使っても文字の周りの背景部分だけは色が変わるのですが、自分は文字部分だけではなくて該当サイトのようにＢＯＸの部分ごと背景色が変わるようにしたいのです。

どのようにソースを書けばよいのでしょうか？
また参考になるページなどがあれば教えてください。

回答No.2

abril · ベストアンサー

> しかしリンクがブロック要素になってしまうのですね。。。

この手の、テキストリンクをボタン的に見せる手法では<a>を"display: block;"でブロック要素化するのが大前提です。
インライン要素であった<a>がブロック要素化される事で、リンク領域がテキスト部分だけでなく親要素の幅に合う様になるので。
勿論、
> http://www.boxicon.com/のサイトのように
も、その手法です。

> どのようにソースを書けばよいのでしょうか？

上記サイトのその部分のマークアップとそれに対応するCSSをのぞき見ればすぐわかりますよ。
ですが、

> このやり方以外でご存知の方がいらっしゃれば引き続きお願いします。

と仰っているところを見ると、「リンクがブロック要素に」なる事なしで「ＢＯＸの部分ごと背景色が変わるようにしたい」のですね？

例えば上記サイトの様なメニュー構成：
---------------------------------------------------------------------
<ul class="hoge">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
---------------------------------------------------------------------
であれば、<a>ではなく<li>に疑似要素":hover"を適用する事もできます：
---------------------------------------------------------------------
ul.hoge {
list-style: none;
width: 200px;
padding: 0;
margin: 0;
}
ul.hoge li {
border: solid 1px #ccc;
padding: 3px;
margin: 0 0 1px 0;
}
ul.hoge li:hover {
background: #fee;
}
---------------------------------------------------------------------
こんな感じで。これだと、<a>自体はインライン要素のままなので、リンク領域はテキスト上のみとなりますが、<li>に疑似要素":hover"を適用しているので、<li>にマウスオーバーした際には、<li>全体の背景色が指定した色（ピンク）に変わります。

しかし、困った事にIE6では疑似要素":hover"が<a>以外の要素には効きません。IE7を含めた主要モダン・ブラウザでは問題ないのですが、IE6だけが未実装なのです。なので、IE6にも同様のスタイルを適用する事を視野に入れるのであれば、hackなどを使ってIE6だけ<a>をブロック要素化して"a:hover"で対応する様にするとか、あるいはJavaScriptを導入してIE6でも<a>以外でも疑似要素":hover"が有効になる様にするとか、の対処が必要となってきます。

お礼

詳しい回答ありがとうございました。

基本的にはブロック要素化するものなのですね。
またブロック化しないで良い方法については大変参考になりました。
ありがとうございます。完璧です。

しかしブラウザの問題がでてくるとのことで
非ブロック要素で作成するには手間がかかってしまうのですね。
そこまでして実行するべか少々考えてみたいと思います。

回答No.1

Wingwrong

display:block;

と、WIDTH・HEIGHTを指定して入れてみたらどうでしょうか。

お礼

さっそくの返信ありがとうございました。

なるほど。

実際やってみて上手く行きませんでしたが
ニュアンスがわかったので細かいところ詰めればやれると思います。
ありがとうございます。

しかしリンクがブロック要素になってしまうのですね。。。
このやり方以外でご存知の方がいらっしゃれば引き続きお願いします。