为啥 :hover 不适用于 tr 元素？

Posted

技术标签:

【中文标题】为啥 :hover 不适用于 tr 元素？【英文标题】：Why is :hover not working for tr element?为什么 :hover 不适用于 tr 元素？ 【发布时间】：2016-02-15 02:17:15 【问题描述】：

在表中我有一些行。我将:hover 设置为tbody>tr，但它不起作用。但是，如果我将相同的 :hover 选择器设置为 tbody>td 确实可以正常工作。 有人可以帮帮我吗？

这是我的代码：

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

【问题讨论】：

嘿，你能在这个 js Fiddle 链接中进行更改吗jsfiddle.net/s92j23ou 以便于理解你的问题 我将 td:hover 更改为 tr:hover，但不起作用 jsfiddle.net/s92j23ou/1 试试这个表 tbody tr:hover td background-color: red 【参考方案1】：

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

如果你去整行改变背景颜色，你需要做以下事情：

从 td 中移除 background-color 并将其添加到 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

【讨论】：

【参考方案2】： 
tbody>td

'>' - 代表直接孩子

表示样式将仅应用于 td，它是 tbody 的直接子级。

确保将 td 作为 tbody 的直接子级。 这是您要寻找的行为吗？ 试试这个 js fiddle

http://jsfiddle.net/ug23pLg5/

【讨论】：

【参考方案3】：

试试这个。

tbody > tr:hover td 
        /*style*/

【讨论】：

【参考方案4】：

由于td元素已经包含了背景色，你需要在悬停tr后选择td来覆盖它。

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>

【讨论】：

以上是关于为啥 :hover 不适用于 tr 元素？的主要内容，如果未能解决你的问题，请参考以下文章

为啥 :hover 不适用于指定的类

为啥点击事件不适用于 iOS 上的 li 元素？

关键帧动画不适用于：moz 中的悬停元素和

为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery？

为啥 nth-of-type/nth-child 不适用于嵌套元素？

java Codingbat notAlone——为啥它不适用于这个特定的例子