Why is :hover not working for tr element?
Since the td element already contains a background color, you need to select the td after hovering tr to override it.
table tbody tr:hover td {
background-color: red
}
JSfiddle Demo
table tbody tr:hover td {
background-color: red
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
table {
width: 100%
}
table thead tr th:first-child {
width: 34%
}
table thead tr th {
width: 2%;
background: #2F75B5;
font-weight: normal;
padding: 2px 3px;
color: #FFFFD4;
}
table tbody tr td:first-child {
width: 34%
}
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
background-color: #DDEBF7
}
table tbody td:hover {
background-color: red
}
.blue {
background-color: #79B7E7
}
.red {
background: #F08080;
font-weight: normal;
}
.green {
background-color: #60CA8F;
font-weight: normal;
}
html {
margin: 1px;
}
body {
font-size: 80%
}
p {
font-size: medium;
}
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
overflow: hidden;
height: 98%;
}
.number {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Colaborador</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
</tbody>
</table>
</body>
</html>CSS hover not works on a table cell if it has a specific background color
If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>Why is tr:hover not changing the background color
It is working, you're just not seeing it work because the td element's background-color is hiding the background-color of the tr element. Instead use:
tr:hover td {
background-color: blue;
}
tr:hover won't trigger on invisible td
It seems that it is simply impossible to trigger a hover event in the way I wanted, but it turns out there is an easy solution. If we include a div within the td, and act on that instead, it works perfectly:
.precell, .postcell {
visibility: hidden;
}
tr:hover .precell {
visibility:visible;
}
tr:hover .postcell {
visibility:visible;
}<table>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
</table>tr:hover & tr:nth-child(odd ~ even) does not work together
This is a specificity / cascade issue.
Either re-order the CSS
td {
padding: 10px;
border: 1px solid grey;
}
.table tbody tr:nth-child(odd) {
background: #FF0000;
}
.table tbody tr:nth-child(even) {
background: green;
}
.table tbody tr:hover {
background: grey;
}<table class="table">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>Highlight a row on hover not working without !important
You are trying to change the background color the td using two different selectors. table tr:nth-child(even) td takes higher precedence over tr:hover td. Set the alternating bg color of the tr and on hover you can set the bg color of the td.
Alternatively you can use the following selector to increase the precedence of hover selector
tr:nth-child(n):hover td {
background: #eee;
}
table {
width:100%;
table-layout: fixed;
}
table tr:nth-child(even){
background: #f3f7fb;
}
table tr:nth-child(odd) {
background: #ffffff;
}
tr:hover td {
background: #eee;
}<table><tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">
<td colspan="1">{{case.Name}}</td>
<td colspan="1">{{case.Total}}</td>
<td colspan="1">{{case.Passed}}</td>
<td colspan="1">{{case.Failed}}</td>
</tr>
<tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">
<td colspan="1">{{case.Name}}</td>
<td colspan="1">{{case.Total}}</td>
<td colspan="1">{{case.Passed}}</td>
<td colspan="1">{{case.Failed}}</td>
</tr>
</table>Related Topics
CSS Fixed Position with Auto Margin
How to Make CSS Animation to Play Every 10 Seconds
CSS Display: Inline-Block Does Not Accept Margin-Top
Safari and Ie Can't Read Ttf and Eot Fonts
Alternative for Nth-Child for Older Ie Browsers
Why Doesn't Height: 0 Hide My Padded <Div>, Even with Box-Sizing: Border-Box
Keep Footer with Variable Height on Bottom
How to Add a CSS Stylesheet in Fxml
Compiling Issue in Bootstrap 3 with Namespace
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used
Attribute Selector Where Value Equals Either a or B
Is There a CSS "Haschildren" Selector
Removing the Clear and Reveal Password Icons from Internet Explorer
How to Adjust the Caret (Blinking Cursor) Size Inside Searchbar with CSS
Make a Grid Column Span the Entire Row