表懸停效果 JavaScript

Question

我有一張桌子，我可以在其中使用滑塊更改背景、表格等的顏色。 問題是，當我打開或關閉滑塊時，表格的懸停效果不再起作用。 我已經用一個函數嘗試過它，但它只有在沒有使用滑塊時才有效。

謝謝你的幫助！

親切的問候馬克斯

 function CheckSlider() { var slider = document.getElementById("colorSlider"); if (slider.checked == true) { document.body.style.background = '#2e2e2e'; ChangeTableColor('#2a0059', '#474747', 'white'); } else { document.body.style.background = 'whitesmoke'; ChangeTableColor('blue', 'white', 'black'); } } function ChangeTableColor(tableHeaderColor, tableDataColor, tableFontColor) { var tableHeader = document.getElementById('indexOverviewTable').getElementsByTagName('th'); var tableData = document.getElementById('indexOverviewTable').getElementsByTagName('td'); for (var i = 0; i < tableHeader.length; i++) { tableHeader[i].style.backgroundColor = tableHeaderColor; } for (var j = 0; j < tableData.length; j++) { tableData[j].style.backgroundColor = tableDataColor; tableData[j].style.color = tableFontColor; } }

 #indexOverviewTable { border: 2px solid white; font-family: Cenury Gothic; } #indexOverviewTable th { background-color: #2a0059; color: white; font-size: 115%; } #indexOverviewTable tr:nth-child(even) { background-color: #474747; color: whitesmoke; } #indexOverviewTable tr:nth-child(odd) { background-color: #696969; color: white; } #indexOverviewTable tr.header, #indexOverviewTable tr:hover { background-color: #999999; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* only change below this line */ .slider:after { font-size: .8em; content: 'OFF'; text-align: right; line-height: 34px; display: block; padding: 0 4px; } input:checked+.slider:after { content: 'ON'; text-align: left; }

 <label class="switch"> <input type="checkbox" id="colorSlider" onclick="CheckSlider()"> <span class="slider round"></span> </label> <table class="table" id="indexOverviewTable" style="padding-top: 1em"> <tr class="header"> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table>

Answer 1

第一：您在hover更改tr但使用滑塊更改td s。 這樣，在您使用滑塊為單元格設置background-color （初始值為inherit ）后，表格行中的background-color將不可見。 因此，您應該定義單元格的懸停效果：

#indexOverviewTable tr:hover td { ... }

此外，CSS 樣式會被您使用 JavaScript 設置的內聯樣式覆蓋。 因此，您應該使用 CSS 為類（可能是body.dark ）定義樣式並使用 JavaScript 切換該類。

CSS 示例：

.dark #indexOverviewTable th {
  background-color: #2a0059;
}

順便說一句： #indexOverviewTable tr.header的background-color定義不是必需的，因為它不可見（在本例中） - th s 隱藏了它......

工作示例：（為了簡單起見，我刪除了 :nth-child(even) 和 :nth-child(odd) 並且因為它只有一行）

 function CheckSlider() { var slider = document.getElementById("colorSlider"); if (slider.checked == true) { document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); } }

 body { background-color: whitesmoke; } body.dark { background-color: #2e2e2e; } #indexOverviewTable { padding-top: 1em; border: 2px solid white; font-family: Cenury Gothic; } #indexOverviewTable th { background-color: blue; color: white; font-size: 115%; } .dark #indexOverviewTable th { background-color: #2a0059; } #indexOverviewTable td { background-color: white; color: black; } .dark #indexOverviewTable td { background-color: #474747; color: whitesmoke; } #indexOverviewTable tr:hover td { background-color: #999999; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* only change below this line */ .slider:after { font-size: .8em; content: 'OFF'; text-align: right; line-height: 34px; display: block; padding: 0 4px; } input:checked+.slider:after { content: 'ON'; text-align: left; }

 <label class="switch"> <input type="checkbox" id="colorSlider" onclick="CheckSlider()"> <span class="slider round"></span> </label> <table class="table" id="indexOverviewTable"> <tr class="header"> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table>

Answer 2

這是默認行為。 幸運的是它可以只用CSS來改變。

將important規則添加到hover樣式。

#indexOverviewTable tr.header,
#indexOverviewTable tr:hover {
  background-color: #999999 !important;
}

然而，使用 !important 是不好的做法，應該避免使用，因為它會破壞樣式表中的自然級聯，從而使調試變得更加困難。 當具有 !important 規則的兩個沖突聲明應用於同一個元素時，將應用具有更大特異性的聲明。

---

您的代碼中還有另一個問題。 您使用hover設置tr元素的樣式，但tableData分配給td元素。

tableData = document.getElementById('indexOverviewTable').getElementsByTagName('td')

^{我建議使用querySelectorAll因為它更短。}

現在我可以展示工作代碼了。

 function CheckSlider() { var slider = document.getElementById("colorSlider"); if (slider.checked == true) { document.body.style.background = '#2e2e2e'; ChangeTableColor('#2a0059', '#474747', 'white'); } else { document.body.style.background = 'whitesmoke'; ChangeTableColor('blue', 'white', 'black'); } } function ChangeTableColor(tableHeaderColor, tableDataColor, tableFontColor) { var tableHeader = document.getElementById('indexOverviewTable').getElementsByTagName('th'); var tableData = document.getElementById('indexOverviewTable').getElementsByTagName('tr'); for (var i = 0; i < tableHeader.length; i++) { tableHeader[i].style.backgroundColor = tableHeaderColor; } for (var j = 0; j < tableData.length; j++) { tableData[j].style.backgroundColor = tableDataColor; tableData[j].style.color = tableFontColor; } }

 #indexOverviewTable { border: 2px solid white; font-family: Cenury Gothic; } #indexOverviewTable th { background-color: #2a0059; color: white; font-size: 115%; } #indexOverviewTable tr:nth-child(even) { background-color: #474747; color: whitesmoke; } #indexOverviewTable tr:nth-child(odd) { background-color: #696969; color: white; } #indexOverviewTable tr.header, #indexOverviewTable tr:hover { background-color: #999999 !important; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* only change below this line */ .slider:after { font-size: .8em; content: 'OFF'; text-align: right; line-height: 34px; display: block; padding: 0 4px; } input:checked+.slider:after { content: 'ON'; text-align: left; }

 <label class="switch"> <input type="checkbox" id="colorSlider" onclick="CheckSlider()"> <span class="slider round"></span> </label> <table class="table" id="indexOverviewTable" style="padding-top: 1em"> <tr class="header"> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table>