tdとtd内リンクにマウスオーバー効果を付けたい。

0   名前： ずきん ： 2006/12/18（月） 14:43  ID:FUlO79v0
あれこれ試したのですがご教授いただける方いらっしゃればお願いします。下記のようなテーブルとそのテーブル内にリンクがあります。個々のtdにオンマウスすると個々のtdの背景とリンクの色が反転するようなものを作成したいのです。

<table><tr>
<td class="test"><a href="あ">あ</a></td>
<td class="test"><a href="い">い</a></td>
<td class="test"><a href="う">う</a></td>
</tr></table>

【何をしてみたのか】
あっちこっち調べてみて

<td onMouseOver="this.style.backgroundColor='#cccccc'"
onMouseOut="this.style.backgroundColor='#FFFFFF'">

を試してみたのですがこれだとリンクまで一緒に変わってくれませんでした。
下記のように外部CSS（test）を作ってみて、

td.test{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
padding:5px;
margin:1px;
}
td.test a:link{ text-decoration:underline; color:#000000; }
td.test a:visited{ text-decoration:underline; color:#000000; }
td.test a:active{ text-decoration:underline; color:#000000; }
td.test a:hover{background-color:#CCCCCC; text-decoration:none; color:#FFFFFF;
}

としましたが結局リンクにオンマウスしないと駄目でした。
少しごちゃごちゃしましたが方法分かる方いらっしゃいましたらご教授下さい。
1   名前： oga ： 2006/12/18（月） 14:43  ID:cWw8hLch
<style>
<!--
td.test{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
td.test a { _width: 100%; display: block; margin: 1px; padding: 5px; }
td.test a:link{ text-decoration:underline; color:#000000; }
td.test a:visited{ text-decoration:underline; color:#000000; }
td.test a:active{ text-decoration:underline; color:#000000; }
td.test a:hover{background-color:#CCCCCC; text-decoration:none; color:#FFFFFF;
}
-->
</style>

スタイルシート部分を上記のとおりにしてみました。
marginとpaddingを"td.test"から"td.test a"に設定。displayをblockとし通常はOKなのですが、ie6のバグ対策として"_width: 100%"を追加しています。
2   名前： ずきん ： 2006/12/18（月） 14:43  ID:FUlO79v0
>oga様

早速のご解答ありがとう御座います。ご教授頂いた内容で考えていた通りになりました！
｢display｣は使った事がなかったので大変勉強になりました。これ使うともっと色々出来そうです。
本当にありがとう御座います！

by ずきん
一覧へ戻る