- 締切済み
マウスが触ったら表中の1行の背景色変えたい
一覧表を作成しておりますが、その表のある列を触ったら、その列にあるすべてのセル(1行を選択したかのようなイメージ)の背景色を変えたいのですが、どのようにしたらよいでしょうか。 できればCSSで実現したいのですが、無理ならJavaScriptでも結構です。 宜しくお願いいたします。
- みんなの回答 (5)
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#2です。 >マウスカーソルが上に来たら という意味です。 そういうことであれば <TR onmouseover="this.style.backgroundColor='#3FF'" onmouseout="this.style.backgroundColor='#FFF'"> とかしてみてください。 tr:hover は、現在のところIEでは使えません
- UKY
- ベストアンサー率50% (604/1207)
> この~~は、スタイルシートに定義するだけでいいんですよね はい。 ただ、今実験したところ Firefox と Opera ではちゃんと表示されましたが IE ではだめでした。
- UKY
- ベストアンサー率50% (604/1207)
「ある列を触る」というのは「マウスカーソルが上に来たら」ということでしょうか? 一行のすべてのセルの色を変えるのなら tr:hover { background: <背景の指定> } td { background: transparent } でできます。 一列のすべてのセルの色を変えるのは CSS では無理です。(JavaScript + DOM なら可能) 「ある列を触る」というのが「そこをクリックしたら」という意味でしたら、CSS ではできませんが JavaScript + DOM なら可能です。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
テーブルの中のTRエレメントを <TR onclick="setBGCOLOR(this)"> のように行をクリックした時にjavascriptを起動するようにして、 Javascriptの方で <script type="text/javascript"> <!-- var oldRow; function setBGCOLOR(r){ if(oldRow!=null)oldRow.style.backgroundColor="#FFF";//WHITE oldRow=r; r.style.backgroundColor="#3FF";//薄いBLUE } //--> </script> のような感じにすると概ねそういう感じにできると思います。
お礼
ありがとうございます。 参考にさせていただきます。
- PCFREAK
- ベストアンサー率51% (417/805)
単なるTABLEタグの背景色を変えたいと言っているならば、CSSでもJavaScriptでも無理です。 その行の背景色を変えたHTMLを再読み込みする事しか方法がありませんが、非現実ですよね。 そういうリッチな表現をするなら最近はFLASHを使うのが流行ですが、TABLEタグですらなくなるので・・・。
お礼
ありがとうございます。 参考にさせていただきます。
補足
ありがとうございます。 参考にさせていただきます。
お礼
補足を2回続けて書けないので、ここに書きます。 一応、UKYさんの通りに実行してみましたがうまくいきません。 この tr:hover { background: <背景の指定> } td { background: transparent } は、スタイルシートに定義するだけでいいんですよね。
補足
回答ありがとうございます。 >「ある列を触る」というのは「マウスカーソルが上に来たら」ということでしょうか? マウスカーソルが上に来たら という意味です。