滑块切换后悬停效果不起作用

Question

我有一个 table，我可以在其中使用滑块更改背景颜色，table 等。问题是，当我打开或关闭滑块时，table 的悬停效果不再起作用。我已经用一个函数试过了，但它只在没有使用滑块时有效。

感谢您的帮助！

亲切的问候最大值

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

这是默认行为。幸运的是，它可以 just 更改为 CSS.

添加 important rule to the hover 样式。

#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.
_{MDN Web Docs | Specifity}

您的代码还有一个问题。您为 tr element with hover but tableData is assigned to a 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>

Interactive Code

Answer 2

首先： 您更改了 hover 上的 tr，但您使用滑块更改了 td。这样，在使用滑块为单元格设置 background-color 后，table 行中的 background-color 将不可见（初始值为 inherit）。因此，您应该为单元格定义悬停效果：

#indexOverviewTable tr:hover td { ... }

此外，CSS 样式被您使用 JavaScript 设置的内联样式覆盖。因此，您应该使用 CSS 为 class（可能 body.dark）定义样式，并将 class 切换为 JavaScript。

CSS 示例：

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

顺便说一句：#indexOverviewTable tr.header 的 background-color 的定义不是必需的，因为它不可见（在此示例中）- th 将其隐藏...

工作示例：（我删除了 :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>

滑块切换后悬停效果不起作用

Hover effect doesn't work after slider toggle

html

javascript

css

hover