Q:

Why is :hover not working for tr element?

In table I have some lines. I am setting :hover to tbody>tr and it doesn't work. However, if I set the same :hover selector to tbody>td does work fine.
Anybody can help me?
This is my code:

<!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>

A:

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>

