CODEWITHSUNDEEP
htmlcssbackground-color
eric.itzhak
eric.itzhak

Reputation: 16062

How to override background style back to original?

I have the following situation :

.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}

Now the tr originaly is green color, and i want when a table has class='data_table unclickable_table' set, that on hover on a tr that has table_green class, the background-color property won't change and stay green, but inherit doesn't seem to work

Example html :

<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
 <td>Untill it goes Click!</td>
</tr>
</tbody></table>

Or this fiddle : http://jsfiddle.net/nyDNc/1/

Any help?

Upvotes: 0

Views: 106

Answers (3)

Bartek Bielawa
Bartek Bielawa

Reputation: 572

i'm not sure i understand You very well, but

DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/

Upvotes: 0

Tom Maitland
Tom Maitland

Reputation: 578

This is a solution, hopefully one that will work within your structure cause it depends on how you're styling your table elements.

inherit won't work because it is inheriting from the table which has a background of none. Instead you can have the tr set and change the colour of the td on hover, so that it has a context to inherit from.

See the working example here on JSFiddle.

The CSS is:

.table_green {
  background: #B4E391;
}
.data_table tbody tr:hover td {
  background-color: #fff;
  cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
  background-color: inherit;
  cursor: default;
}

Upvotes: 1

Paul van den Dool
Paul van den Dool

Reputation: 3212

Why do you add a second class in order to override the effect the first class has. Why don't you just remove the 'data_table' classes on the rows you don't want the effect on.

Upvotes: 0

Related Questions