表悬停效果 JavaScript

Question

i have a table, where i change the color of the background, table etc. with a slider. The problem is, that when i turn the slider on or off, the hover effect of the table doesn't work anymore. I have tried it with a function but it only works, when the slider has not been used.

Thanks for your help!

Kind regards Max

 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

First: You change the tr on hover but with your slider you change the td s. This way the background-color from the table row can't be visible after you gave the cells a background-color with the slider (initial is inherit ). Therefor you should define the hover effect for the cells:

#indexOverviewTable tr:hover td { ... }

Furthermore the CSS styles are overridden by the inline styles, that you set with JavaScript. Therefor you should define the styles with CSS for a class (maybe body.dark ) and toggle that class with JavaScript.

CSS example:

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

By the way: The definition of a background-color for #indexOverviewTable tr.header isn't necessary because it isn't visible (in this example) - the th s are hiding it...

Working example: ( i removed :nth-child(even) and :nth-child(odd) for simplicity and because it was only one row )

 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

This is the default behavior. Fortunately it can be changed just with using CSS.

Add the important rule to the hover style.

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

Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

---

There is another problem in your code. You style the tr element with hover but tableData is assigned to a td element.

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

^{I recommend using querySelectorAll as it is shorter.}

Now I can present the working code.

 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>