th 和 td 与背景颜色和文本颜色不随悬停改变背景颜色？

Question

我正在为一项学校作业制作日历，我决定添加 'hover'，这样当鼠标悬停在 table header/data 上时，它会更改其背景颜色。它在无色 table header/data 上按预期工作，但它不会更改具有红色背景颜色和白色文本颜色的背景颜色。

这是代码。

<html lang="eng">
    <head>
        <title>Computer 8 Quiz 3 | 4th Quarter</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th, td {
                text-align: center;
                padding: 10px 0px
            }
            th:hover {background-color: #BBBBBB}
            td:hover {background-color: #BBBBBB}
        </style>
    </head>
    <body style="text-align: center;">
        <div style="margin: 0px 100px; padding: 20px 5px">
            <div>
                <header>
                    <h1>2022 Calendar</h1>
                </header>
            </div>
            <br>
            <div>
                <table width="700" style="margin-right: auto; margin-left: auto;">
                    <tr>
                        <th colspan="7"><span style="font-size: 25px;">May</span></th>
                    </tr>
                    <tr>
                        <th style="background-color: #f5425a; color: white">SUN</th>
                        <th style="background-color: #f5425a; color: white">MON</th>
                        <th>TUE</th>
                        <th>WED</th>
                        <th>THU</th>
                        <th>FRI</th>
                        <th>SAT</th>
                    </tr>
                    <tr>
                        <td style="background-color: #f5425a; color: white">1</td>
                        <td style="background-color: #f5425a; color: white">2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td style="background-color: #f5425a; color: white">8</td>
                        <td style="background-color: #f5425a; color: white">9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td style="background-color: #f5425a; color: white">15</td>
                        <td style="background-color: #f5425a; color: white">16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <td style="background-color: #f5425a; color: white">22</td>
                        <td style="background-color: #f5425a; color: white">23</td>
                        <td>24</td>
                        <td>25</td>
                        <td>26</td>
                        <td>27</td>
                        <td>28</td>
                    </tr>
                    <tr>
                        <td style="background-color: #f5425a; color: white">29</td>
                        <td style="background-color: #f5425a; color: white">30</td>
                        <td>31</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <br><br><br><br><br><br>
        <div style="text-align: left;">
                <footer>
                    <p>Author: Brent Lee de Guzman</p>
                    <a href="mailto:brent.lee.de_guzman@icloud.com">Contact me here!</a>
                </footer>
            </div>
    </body>
</html>

如何让彩色背景的在悬停时也改变它们的背景颜色？我对此感到非常困惑，我正试图找出发生这种情况的原因。请帮助我解决这个问题，在此先感谢！

Answer 1

来自MDN

Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

您可以通过多种方式悬停鼠标来更改这些元素的颜色。

一种快速但通常被认为相当肮脏的覆盖方法是在样式表中提供悬停设置！重要的补充如下片段所示：

<html lang="eng">

<head>
  <title>Computer 8 Quiz 3 | 4th Quarter</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    th,
    td {
      text-align: center;
      padding: 10px 0px
    }
    
    th:hover {
      background-color: #BBBBBB !important
    }
    
    td:hover {
      background-color: #BBBBBB !important
    }
  </style>
</head>

<body style="text-align: center;">
  <div style="margin: 0px 100px; padding: 20px 5px">
    <div>
      <header>
        <h1>2022 Calendar</h1>
      </header>
    </div>
    <br>
    <div>
      <table width="700" style="margin-right: auto; margin-left: auto;">
        <tr>
          <th colspan="7"><span style="font-size: 25px;">May</span></th>
        </tr>
        <tr>
          <th style="background-color: #f5425a; color: white">SUN</th>
          <th style="background-color: #f5425a; color: white">MON</th>
          <th>TUE</th>
          <th>WED</th>
          <th>THU</th>
          <th>FRI</th>
          <th>SAT</th>
        </tr>
        <tr>
          <td style="background-color: #f5425a; color: white">1</td>
          <td style="background-color: #f5425a; color: white">2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
        </tr>
        <tr>
          <td style="background-color: #f5425a; color: white">8</td>
          <td style="background-color: #f5425a; color: white">9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
        </tr>
        <tr>
          <td style="background-color: #f5425a; color: white">15</td>
          <td style="background-color: #f5425a; color: white">16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
        </tr>
        <tr>
          <td style="background-color: #f5425a; color: white">22</td>
          <td style="background-color: #f5425a; color: white">23</td>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
          <td>28</td>
        </tr>
        <tr>
          <td style="background-color: #f5425a; color: white">29</td>
          <td style="background-color: #f5425a; color: white">30</td>
          <td>31</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
  <br><br><br><br><br><br>
  <div style="text-align: left;">
    <footer>
      <p>Author: Brent Lee de Guzman</p>
      <a href="mailto:brent.lee.de_guzman@icloud.com">Contact me here!</a>
    </footer>
  </div>
</body>

</html>

但是，更易于维护的替代方法可能是完全删除内联样式并使用 classes 而不是内联样式。

根据您的确切用例，您可以更进一步，在每一行（第一行除外）上使用子 select 到 select 第一和第二个元素，而无需使用单独的class.

th 和 td 与背景颜色和文本颜色不随悬停改变背景颜色？

th and td with background color and text color not changing background color with hover?

html

css

hover