0

マウスオーバーで背景色を変更しようとしています。

私はこのCSSコードを持っています

table.subform{width: 550px}
table.subform tr td{padding: 3px}
table.subform tr td:first-child{text-align: right}
table.subform2{width: 100%}
table.subform2 tr td{padding: 5px;}
table.subform2 tr td:first-child{text-align: right;background-color: #E3E3E3;font-weight: bold;width: 50%;border-bottom: 1px solid #c6c6c6;padding-right: 10px}
table.subform2 tr td:last-child{text-align: left;background-color: #f1f1f1;vertical-align: top}
table.subform2 tr:hover{color: #082;background-color: #FFF}

最後の行table.subform2 tr:hoverでわかるように、マウスが TR をホバーすると、完全な TR の背景色を変更する必要があります。

4

4 に答える 4

3

とで定義background-colorしたため、背景は変更されません。background-color を定義しないか、background-colorのみを定義すると、background-color が変更されます。table.subform2 tr td:first-child...:last-child... tr

中央の列のJSFiddleを参照してください。

最後の行を次のように変更します

table.subform2 tr:hover td{color: #082;background-color: #FFF}

これにより要素が選択され、tdそれに応じて背景色が変更されます。

変更された JSFiddle

于 2013-01-28T08:18:04.763 に答える
1

background-colorあなたはそれがTDであると定義しているので、それは見えません。このように書いてください：

table.subform2 tr:hover td{color: #082;background-color: #FFF}

これをチェックしてくださいhttp://jsfiddle.net/ZrYUJ/2/

于 2013-01-28T08:21:05.273 に答える
0

あなたは書くべきです

table.subform2 tr:hover td{color: #082;background-color: #FFF}

代わりは。子のtdの背景色を設定したためです。

また、tr：hoverは一部の古いブラウザでは機能しません。これを修正するためにjavascriptを使用できます。

http://jsfiddle.net/DK5x4/

于 2013-01-28T08:20:55.030 に答える
0

HTML に何か問題があると、tr:hover動作しない可能性があるため、HTML を記述します。tr:hoverどこでもサポートされているわけではないため、ブラウザが古くないことを確認してください。

于 2013-01-28T08:19:04.240 に答える