th 和 td 的背景颜色和文本颜色不会通过悬停改变背景颜色？
我正在为学校作业制作日历，我决定添加“悬停”，因此当鼠标悬停在表标头/数据上时，它将改变其背景颜色。它按照未彩色的表标头/数据的目的工作，但它不会改变具有红色背景颜色和白色文本颜色的背景颜色。
这是代码。
<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>
。也会在悬停时更改其背景颜色吗？我对此感到非常困惑，我试图找到发生这种情况的原因。请帮助我解决这个问题，谢谢！
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>
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
来自
您可以通过多种方式徘徊，甚至可以改变这些元素的颜色。
一种快速，通常被认为是肮脏的，覆盖的方式是在样式表中提供悬停设置！像在此片段中一样重要的添加：
但是，更可维护的替代方法可能是完全删除内联样式并使用类而不是内联样式。
根据您的确切用例，您可能可以进一步走，并在每行（第一个除外）上使用子选择器在不使用单独类的情况下选择第一个和第二个元素。
From MDN
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:
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.