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

I'm making a calendar for a school assignment and I decided to add 'hover' so when the mouse hovers over the table header/data, it will change its background color. It works as intended on the uncolored table header/data, but it doesn't change the background color on the ones with a red background color and white text color.

here's the code.

<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:[email protected]">Contact me here!</a>
                </footer>
            </div>
    </body>
</html>

hovering over will make they turn grey background color, but not the red ones.1

How do I make the colored-background ones change their background color on hover too? I'm a really confused on this one, and I'm trying to find the reason why this happens. Please help me on this problem, thanks in advance!

CodePudding user response：

From 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.

There are various ways you can get hover to change the color of even those elements.

A quick, and often regarded as rather dirty, way of overriding this is to give the hover settings in the stylesheet !important additions as in this snippet:

<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:[email protected]">Contact me here!</a>
    </footer>
  </div>
</body>

</html>

However, a more maintainable alternative may be to remove inline styling altogether and use classes instead of inline style.

Depending on your exact use case you may be able to go further and use child selectors on each row (except the first) to select the first and second elements without using a separate class.