th 和 td 与背景颜色和文本颜色不改变背景颜色与 hover？
[英]th and td with background color and text color not changing background color with hover?
问题描述
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:brent.lee.de_guzman@icloud.com">Contact me here!</a>
</footer>
</div>
</body>
</html>
How do I make the colored-background ones change their background color on hover too?如何让彩色背景的也改变它们在 hover 上的背景颜色？ 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!请帮助我解决这个问题，在此先感谢！
1 个解决方案
解决方案1
0 已采纳 2022-04-02 07:27:16
Inline styles added to an element (eg, 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.您可以通过多种方式获得 hover 来更改这些元素的颜色。
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:一种快速且通常被认为相当肮脏的覆盖方法是在样式表中提供 hover 设置：重要的添加如下片段所示：
<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>
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.根据您的确切用例，您可以进一步使用 go 并在每一行（第一行除外）上使用子选择器到 select 第一和第二个元素，而无需使用单独的 class。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.