Menu
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>
311
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>Try this.
tbody > tr:hover td {
/*style*/
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
