title: th and td with background color and text color not changing background color with hover?
body: <p>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.</p>
  <p>here's the code.</p>
  <pre><code>&lt;html lang=&quot;eng&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;Computer 8 Quiz 3 | 4th Quarter&lt;/title&gt;
          &lt;style&gt;
              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}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body style=&quot;text-align: center;&quot;&gt;
          &lt;div style=&quot;margin: 0px 100px; padding: 20px 5px&quot;&gt;
              &lt;div&gt;
                  &lt;header&gt;
                      &lt;h1&gt;2022 Calendar&lt;/h1&gt;
                  &lt;/header&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div&gt;
                  &lt;table width=&quot;700&quot; style=&quot;margin-right: auto; margin-left: auto;&quot;&gt;
                      &lt;tr&gt;
                          &lt;th colspan=&quot;7&quot;&gt;&lt;span style=&quot;font-size: 25px;&quot;&gt;May&lt;/span&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th style=&quot;background-color: #f5425a; color: white&quot;&gt;SUN&lt;/th&gt;
                          &lt;th style=&quot;background-color: #f5425a; color: white&quot;&gt;MON&lt;/th&gt;
                          &lt;th&gt;TUE&lt;/th&gt;
                          &lt;th&gt;WED&lt;/th&gt;
                          &lt;th&gt;THU&lt;/th&gt;
                          &lt;th&gt;FRI&lt;/th&gt;
                          &lt;th&gt;SAT&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;1&lt;/td&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;2&lt;/td&gt;
                          &lt;td&gt;3&lt;/td&gt;
                          &lt;td&gt;4&lt;/td&gt;
                          &lt;td&gt;5&lt;/td&gt;
                          &lt;td&gt;6&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;8&lt;/td&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;9&lt;/td&gt;
                          &lt;td&gt;10&lt;/td&gt;
                          &lt;td&gt;11&lt;/td&gt;
                          &lt;td&gt;12&lt;/td&gt;
                          &lt;td&gt;13&lt;/td&gt;
                          &lt;td&gt;14&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;15&lt;/td&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;16&lt;/td&gt;
                          &lt;td&gt;17&lt;/td&gt;
                          &lt;td&gt;18&lt;/td&gt;
                          &lt;td&gt;19&lt;/td&gt;
                          &lt;td&gt;20&lt;/td&gt;
                          &lt;td&gt;21&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;22&lt;/td&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;23&lt;/td&gt;
                          &lt;td&gt;24&lt;/td&gt;
                          &lt;td&gt;25&lt;/td&gt;
                          &lt;td&gt;26&lt;/td&gt;
                          &lt;td&gt;27&lt;/td&gt;
                          &lt;td&gt;28&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;29&lt;/td&gt;
                          &lt;td style=&quot;background-color: #f5425a; color: white&quot;&gt;30&lt;/td&gt;
                          &lt;td&gt;31&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;div style=&quot;text-align: left;&quot;&gt;
                  &lt;footer&gt;
                      &lt;p&gt;Author: Brent Lee de Guzman&lt;/p&gt;
                      &lt;a href=&quot;mailto:brent.lee.de_guzman@icloud.com&quot;&gt;Contact me here!&lt;/a&gt;
                  &lt;/footer&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/ZSh6c.png" alt="hovering over will make they turn grey background color, but not the red ones.1" /></p>
  <p>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!</p>