微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

如何解决滑块切换后悬停效果不起作用

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

感谢您的帮助！

亲切的问候 最大

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>

解决方法

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

#indexOverviewTable tr:hover td { ... }

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

CSS 示例：

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

顺便说一句：background-color 的 #indexOverviewTable tr.header 的定义不是必需的，因为它不可见（在本例中） - 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>

,

这是默认行为。幸运的是，它可以只需用 CSS 更改。

将 important 规则添加到 hover 样式。

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

然而，使用 !important 是不好的做法，应该避免，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。当具有 !important 规则的两个冲突声明应用于同一个元素时，将应用具有更大特异性的声明。
MDN 网络文档 | Specifity

您的代码中存在另一个问题。您使用 tr 设置 hover 元素的样式，但将 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>

Interactive Code

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native