[英]HTML change table cell background AND text font colour on hover AT THE SAME TIME
NEWBIE：我目前正在1and1網站上工作。 我希望主頁上的所有框都鏈接到不同的子頁面。 每個框都包含一張圖片和圖片下方的“類別”文本。 由於邊框的緣故，我使用表格中的表格來創建框。 我還添加了懸停效果，因此當您將鼠標懸停在任何這些框/表上時，背景會更改顏色。 我想做的是使文本在同一時間更改顏色，而框更改顏色。 我應該指出，我對CSS完全一無所知，而對HTML則了解甚少，因此，一個可行的示例將使我為之開心！ 提前致謝。 到目前為止，這是我拼湊的：
<table border="0" cellpadding="10" cellspacing="10" style="width: 685px;">
<tbody>
<tr>
<td>
<table bgcolor="#F7F7F3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'; this.style.color='black'" style="width: 100%; color: black;">
<tbody>
<tr>
<td>
<p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>
<p> </p>
<p><strong><span style="color:#89A6A1;">Category</span></strong></p>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;">
<tbody>
<tr>
<td>
<p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>
<p> </p>
<p><strong><span style="color:#89A6A1;">Category</span></strong></p>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;">
<tbody>
<tr>
<td>
<p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>
<p> </p>
<p><strong><span style="color:#89A6A1;">Category</span></strong></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
僅使用color：green為例。 您應該嘗試將樣式與html分開，已棄用了在表標簽上使用的某些屬性，請在此處查看w3Schools表標簽
td:hover{background:#F00;color:#0f0;}
<table> <tr> <td>cell 1</td> <td> cell 2</td> </tr> </table>
當前代碼的主要問題是單元格包含各種元素，這些元素具有自己的文本（內容）顏色：鏈接和span元素，其上設置了color屬性。 在單元格上設置文本顏色（直接或通過在附表中設置文本顏色）不能覆蓋此類內容。
該代碼可能應該重構（重寫），但這是解決此特定問題的最小更改。 我刪除了onmouseover和onmouseout屬性，因為僅使用:hover偽類進行設置就更容易且更可靠。 這里的重點是為td元素的所有后代（其中的所有元素）設置文本顏色，並且由於使用內聯樣式， style=...屬性在span上設置了顏色，因此需要!important說明符來覆蓋它。
table table td:hover { background: #89A6A1; } table table td:hover * { color: black !important; }
<table border="0" cellpadding="10" cellspacing="10" style="width: 685px;"> <tbody> <tr> <td> <table bgcolor="#F7F7F3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%; color: black;"> <tbody> <tr> <td> <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p> <p> </p> <p><strong><span style="color:#89A6A1;">Category</span></strong></p> </td> </tr> </tbody> </table> </td> <td> <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%;"> <tbody> <tr> <td> <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p> <p> </p> <p><strong><span style="color:#89A6A1;">Category</span></strong></p> </td> </tr> </tbody> </table> </td> <td> <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%;"> <tbody> <tr> <td> <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p> <p> </p> <p><strong><span style="color:#89A6A1;">Category</span></strong></p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
示例在這里。 這是從以下線程獲取的：當我將鼠標懸停並修改時 ，更改html表中單元格的顏色 ：
<!DOCTYPE html>
<html>
<style type="text/css">
.styledTable td:hover {
background-color: #ff0000;
color: blue;
}
</style>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrap">
<table class="styledTable" border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<hr/>
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
這里有兩個表。 一個應用了樣式，另一種沒有樣式。 這兩個表之間的主要區別是第一個表中的class = styledTable屬性。 然后，在HTML的css部分中，我們可以使用一種樣式，該樣式可以應用於具有名為styledTable的類的表中的所有td元素。 ：hover部分表示當鼠標懸停在元素上時應應用樣式：
.styledTable td:hover{
background-color: #ff0000;
color: blue;
}
希望能幫助到你。
如果內容與另一個單元格不同，則更改表格單元格的背景顏色
[英]Change the background colour of a table cell if the content is not the same as another cell
更改表格單元格的背景顏色而無需更改表格或 <td> 類
[英]Change background colour of table cell without altering table or <td> class
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.