为什么：悬停不适用于tr元素？

时间：2015-11-13 13:24:21

标签： html css html-table hover

在表格中我有一些行。我将:hover设置为tbody>tr，但它无法正常工作。但是，如果我将:hover选择器设置为tbody>td，则可以正常工作 有谁可以帮帮我？

这是我的代码：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：5)

由于td元素已包含背景颜色，因此您需要在悬停td后选择tr以覆盖它。

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>

答案 1 :(得分：2)

试试这个。

tbody > tr:hover td {
        /*style*/
    }

答案 2 :(得分：2)

你的td已经有了背景颜色，可以被覆盖，正如Manoj Kumar在他的answer中所说并显示的那样。

如果您去整行改变背景颜色，则需要执行以下操作：

从td中删除背景颜色并将其添加到tr：

table tbody tr td {
  width: 2%;
  z-index: 0;
  padding: 2px 0px 3px 10px;
}

table tbody tr {
  background-color: #DDEBF7
}

将悬停更改为tr：

table tbody tr:hover {
  background-color: red
}

要显示它有效，请注明JSFiddle

答案 3 :(得分：0)

tbody>td
  

'＆GT;' - 代表直系孩子

表示样式将仅应用于td的直接子项td。

确保你有td作为tbody的直接孩子。 这是你要找的行为吗？ 试试这个小提琴

http://jsfiddle.net/ug23pLg5/

相关问题
最新问题