表悬停效果 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>