a:hoverで背景色を指定すると文字が消える！

質問

cssとHTMLを下記のように書きました。
a:hoverで背景色が白から赤へ、文字色が黒から白に変わるようにしたつもりでしたが、
実際にマウスカーソルを乗せると、背景色は赤になりましたが、
なんと文字は消えてしまったのです！！

文字が見えるようにするには、どうしたら良いか教えて下さいませ。
あと、変な所があればご教示いただけると嬉しいです。

css
---------------------------------
.box {
display: table;
}

.box-cell {
float: left;
display: table-cell;
position: relative;
color: #000;
background-color: #fff;
}

.box-cell:after {
clear: both;
}

.box-cell a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.box-cell a:hover {
color: #fff;
background-color: #ff0000;
}
---------------------------------

HTML
---------------------------------
<div class="box">
<div class="box-cell">
あいうえお<br />
かきくけこ<a href="http://www.yahoo.co.jp/"></a>
</div>
<div class="box-cell">
あいうえお<br />
かきくけこ<a href="http://www.yahoo.co.jp/"></a>
</div>
</div>
---------------------------------

回答No.1

Nas_life_is_gd · ベストアンサー

突っ込みどころはあるのですが、
結論から言うと、これでいけます。
------------------------------------------------------------
.box-cell {
float: left;
position: relative;
color: #000;
background-color: #fff;
}
.box-cell:hover {
background: #f00;
color: #fff;
}
.box-cell:after {
clear: both;
}
.box-cell a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
------------------------------------------------------------

aタグにposition: absolute;しているため、レイヤーが上位にきてしまい、
aタグが文字の上に覆いかぶさってしまっているのが原因です。
ですので親要素のbox-cellにhoverすれば
いけるというわけです。

指摘点としては、
そもそもhtmlの記述として、
------------------------------------------------------------
<div class="box-cell">
あいうえお<br />
かきくけこ<a href="http://www.yahoo.co.jp/"></a>
</div>
------------------------------------------------------------
とするのではなく、
------------------------------------------------------------
<div class="box-cell">
<a href="http://www.yahoo.co.jp/">あいうえお<br />
かきくけこ</a>
</div>
------------------------------------------------------------
とするのがスマートです。
またはhtml5であれば
------------------------------------------------------------
<a href="http://www.yahoo.co.jp/">
<div class="box-cell">
あいうえお<br />
かきくけこ
</div>
</a>
------------------------------------------------------------
でも可能ですが、いずれにしてもaタグが独立しているのに
違和感を感じます。
通常、リンクエリアはリンクさせたい箇所を囲うのが普通です。
なので先に結論としてあげたCSSもhtmlとの兼ね合いを見たら
スマートではないですね。

ただどうしてもhtmlは変更できない事情がおありなら、
先に書いたCSSのようにする必要があります。

その他指摘点として、
cssのプロパティでdisplay: table;とdisplay: table-cell;を使っているのに
なぜfloat: left;を使用しているのかが違和感です。
display: table-cell;の時点で横並びは成立しているので、
float: left;を使う必要がないです。
display: table;とdisplay: table-cell;を使うのをやめるか、
float: left;を使うのをやめるとかしたほうがいいと思います。
先に書いたCSSはdisplay: table;をやめてfloat: left;を採用した例です。

お礼

出来ました！
floatは本当に難しいです・・・。
display: table-cell;は外せましたが、display: table;を外そうとするとなんか上手くいかなかったのでお勉強しながら外していきたいと思います。

ご丁寧な回答をありがとうございました。