表格悬停效果javascript

5rgfhyps  于 2021-09-29  发布在  Java
关注(0)|答案(2)|浏览(383)

我有一张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>
JavaScriptHtmlcssHover

2条答案

按热度按时间
zynd9foi

zynd9foi1#

这是默认行为。幸运的是，只要使用css就可以改变它。
添加 important 统治 hover 风格


# indexOverviewTable tr.header,

# indexOverviewTable tr:hover {

  background-color: #999999 !important;
}

使用！然而，重要的是，这是一种不好的做法，应该避免，因为它会破坏样式表中的自然级联，从而使调试更加困难。当两个声明相互冲突时！如果将重要规则应用于同一元素，则将应用具有更大特殊性的声明。
代码中还有另一个问题。你设计这个 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>
赞(0）分享  回复(0）举报  2021-09-29
vdzxcuhz

vdzxcuhz2#

第一：你改变了主意 tr 在…上 hover 但使用滑块可以更改 td S这边 background-color 在给单元格设置了一个 background-color 使用滑块（初始值为 inherit ). 因此，您应该为单元格定义悬停效果：


# indexOverviewTable tr:hover td { ... }

此外，css样式被使用javascript设置的内联样式覆盖。因此，您应该使用css为类定义样式（可能是 body.dark )并使用javascript切换该类。
css示例：

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

顺便问一下：a的定义 background-color 对于 #indexOverviewTable tr.header 不需要，因为它不可见（在本例中）- th 他们把它藏起来了。。。
工作示例：（为了简单起见，我删除了：nth child（偶数）和：nth child（奇数），因为它只有一行）

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>
赞(0）分享  回复(0）举报  2021-09-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com