CSSテクニックコミュのdiv範囲内をリンク対象にしたい、またリンクhover時にdiv範囲内の背景色を変更したい

2つ質問があるのですが、
・div範囲内をリンク対象にして、カーソルオン時に背景色を変更したい。
・リンク文字列のみリンク対象で、カーソルオン時にdiv範囲内の背景色を変更したい。

見た目だけで言えば、前者はmixiの各月の日記一覧みたいな感じです。
これらはCSSだけで可能なものなのでしょうか？

後者は、a:hover内でbackground-colorを指定すると、文字列の背景だけしか変更されませんし、前者に至っては検討もつきません。
一応一通り検索してみたのですが、見当たらず途方に暮れてます。

どうか、よろしくお願いします。

コメント(8)

最初
全て
最新の40件

[1] mixiユーザー 05月03日 14:08

似たことは以下のようにすれば出来るだろうけど、少しちがうかも…。

a{display: block; }
a:hover{background-color:black;}

<div>
<a>aaa</a>
</div>

[2] mixiユーザー 05月03日 14:14

なぜ"div"？

ご質問の1けんめはインライン要素のaをブロック要素にすることで解決しそうです

a{display: block;}
a:link {background-color: #ffffff}
a:visited {background-color: #ffcc00}
a:hover {background-color: #ffcc00}

かくにんどうぞよろしくおねがいします

[3] mixiユーザー 05月03日 14:18

前者はarigayasさんの書かれたようにdiv要素内にa要素をdisplay:blockとして隙間なく配置されるようにすれば可能です（a要素のmarginもdiv要素のpaddingも0ということです）。適当に高さや横幅を追記してください（この場合、むしろdiv要素が余分な気もしますが）。

後者はdiv要素にhover擬似クラスを設定すれば可能ですが、対応していないブラウザもありますし仕様上対応しなければならないものでもなかったような気がします（すいません確認してません）。JavaScriptを使用すれば大抵の環境で可能だとは思いますが、CSSのみでやろうとするとうまくいかない場合もあります。

[5] mixiユーザー 05月03日 14:34

http://www.wiredope.com/csstemp/?p_id=sample_dynamic_1
各月の日記一覧だったらこんなんでいいのではないでしょうか？

[6] mixiユーザー 05月03日 15:18

皆さま、ご丁寧にありがとうございます。

divに以下のような要素を割り当てていたのですが、後者の動作をしてしまいました。widthが悪さ？をしていたので、aにもwidthを指定したら無事前者の動作をしましたが、block要素とはそのようなものなのでしょうか。
いまいち概念的にわからないもので・・・

.menu {
margin-left : 100px;
width : 200px;
border : 1px solid #ee4926;
}

一応、新しいa要素です
a{
display : block;
width : 200px;
color : #996600;
text-decoration : none;
}

[7] mixiユーザー 05月03日 16:15

解決済みだったらすみません。
つまりこういうコト…かな？と思われましたが、どうでしょう。
ローカルで確認してみてください。

---CSS---
.link a{ width : 100%;
color : #996600; }

.link a:hover { width:100%;
background-color:#f1e0ba;
text-decoration: none; }

---HTML---
<div style="width:30%;text-align:center;" class="link"><a href="#">あいうえお</a></div>

対応ブラウザは未確認ですが(汗)。

div要素の横幅範囲内なら、文字上にカーソルを置かずとも、背景色が変わります。

テーブルだと、こんな感じで呼び出せますが。

---HTML---
<table width="200" border="0" cellspacing="0" cellpadding="5">
<tr><td class="link" align="center"><a href="#">あいうえお</a></td></tr>
<tr><td class="link"><a href="#">あいうえお</a></td></tr>
<tr><td class="link"><a href="#">あいうえお</a></td></tr>
</table>

[8] mixiユーザー 05月03日 16:36

aはインライン要素なので、display:blockにしないとwidth等が無効なのが正しい仕様だったはず。
IEだとblockにしなくてもwidth等使えますが、ネスケだとできないはず。

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