CODEWITHSUNDEEP
css
Bhavik Patel
Bhavik Patel

Reputation: 789

not able to set background color in given styles

i trying to change background color on mouse over.

i have this css code

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}

as you can see in last line table.subform2 tr:hover when someone mouse hover TR then full TR's background color have to be change

Upvotes: 0

Views: 88

Answers (4)

sandeep
sandeep

Reputation: 92793

Your are define background-color to it's TD that's why it's not visible. Write like this:

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

Check this http://jsfiddle.net/ZrYUJ/2/

Upvotes: 1

budde
budde

Reputation: 182

You should write 

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

instead. Because you have set the background color of the child td's.

Also tr:hover does not work in some older browsers. You can use javascript for fixing this.

http://jsfiddle.net/DK5x4/

Upvotes: 0

Панайот Толев
Панайот Толев

Reputation: 6607

Write your HTML because if something is wrong in it it is possible reason tr:hover to not working. And make sure the browser is not old because tr:hover is not supported everywhere.

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74058

The background doesn't change, because you have defined background-color in table.subform2 tr td:first-child and ...:last-child. When you define no background-color or define a background-color on ... tr only, the background-color changes.

See JSFiddle, the middle column.

Change the last line to 

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

this selects the td element and changes the background-color accordingly.

Modified JSFiddle

Upvotes: 3

Related Questions