在悬停表格单元格上，根据悬停单元格的行高突出显示所有相应的单元格/行

Question

我正在尝试使用 VueJS 创建一个日程表。其中不同的列代表不同活动时长的场地，每行代表5分钟的时间。

持续时间差异是通过向单元格提供行跨度来完成的。

 <table>
  <thead>
    <tr>
      <th>Time</th>
      <th class="col">Col One</th>
      <th class="col">Col Two</th>
      <th class="col">Col Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10:00 am</td>
      <td rowspan="3">Event 1</td>
      <td rowspan="4">Event 2</td>
      <td rowspan="6">Event 3</td>
    </tr>
    <tr>
      <td>10:05 am</td>
    </tr>
    <tr>
      <td>10:10 am</td>
    </tr>
    <tr>
      <td>10:15 am</td>
      <td rowspan="3">Event 4</td>
    </tr>
    </tr>
    <tr>
      <td>10:20 am</td>
      <td rowspan="4">Event 5</td>
    </tr>
    </tr>
    <tr>
      <td>10:25 am</td>
    </tr>
    </tr>
    <tr>
      <td>10:30 am</td>
      <td rowspan="3">Event 7</td>
      <td rowspan="6">Event 6</td>
    </tr>
    </tr>
    <tr>
      <td>10:35 am</td>
    </tr>
    <tr>
      <td>10:40 am</td>
      <td rowspan="4">Event 9</td>
    </tr>
    <tr>
      <td>10:45 am</td>
      <td rowspan="3">Event 8</td>
    </tr>
    <tr>
      <td>10:50 am</td>
    </tr>
    <tr>
      <td>10:55 am</td>
    </tr>
    <tr>
      <td>11:00 am</td>
    </tr>
  </tbody>
  </tr>
</table>

使用悬停效果突出显示每个事件

tbody td:hover {
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
  -moz-box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
}

使用第一个孩子悬停效果突出显示事件的开始时间

tbody tr:hover td:first-child {
  background-color: rgb(119, 160, 190) !important;
  color: #fff !important;
  font-weight: bold;
}

我的要求是突出显示从开始时间到结束时间的时间单元格。需要为悬停的 td 单元格的行高下的第一个 td 单元格添加悬停效果。有没有办法使用 CSS 来做到这一点？

如果不可能，建议使用 VueJS DOM 选择技术来做这件事。

Codepen Sample HTML and CSS

提前致谢

Answer 1

（等待反馈时）

您可以使用从悬停单元格中绘制的半透明伪像，并将其悬停在第一列前面的单元格中。

Javascript 和自定义 CSS 可以帮助您简化来自 demo idea i linked earlier 的代码。

function highlightTimeEvent() {
let tdcol = document.querySelectorAll("tbody tr td:not(:first-child)");
[...tdcol].forEach((td) => {
  td.style.setProperty("--offset", td.offsetLeft * -1 + "px");
  // console.log(td.style.getPropertyValue("--offset")); //check it out if any doubt

});
}

window.onload=highlightTimeEvent;
window.onresize=highlightTimeEvent;

table {
  text-align: left;
  position: relative;
  border-collapse: collapse;
  margin:auto;
}

table th {
  background: #2c3b46;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 8px;
  color: aliceblue;
  width: 150px;
}

table tr td {
  background: #ccc;
  text-align: center;
  border: 1px;
  padding: 7px 0px 7px 0px;
}

tbody td:hover {
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
  -moz-box-shadow: 0px 0px 5px 2px rgba(13, 84, 139, 0.3) !important;
}


/*
tbody tr:hover td:first-child {
  background-color: rgb(119, 160, 190) !important;
  color: #fff !important;
  font-weight: bold;
}*/

tbody td {
  border-right: rgba(63, 63, 63, 0.507) 1px solid !important;
}

tbody td~td:hover:before {
  content: "";
  background: rgba(0, 125, 255, 0.25);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  left: var(--offset);
}

<table>
  <thead>
    <tr>
      <th>Time</th>
      <th class="col">Col One</th>
      <th class="col">Col Two</th>
      <th class="col">Col Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10:00 am</td>
      <td rowspan="3">Event 1</td>
      <td rowspan="4">Event 2</td>
      <td rowspan="6">Event 3</td>
    </tr>
    <tr>
      <td>10:05 am</td>
    </tr>
    <tr>
      <td>10:10 am</td>
    </tr>
    <tr>
      <td>10:15 am</td>
      <td rowspan="3">Event 4</td>
    </tr>
    </tr>
    <tr>
      <td>10:20 am</td>
      <td rowspan="4">Event 5</td>
    </tr>
    </tr>
    <tr>
      <td>10:25 am</td>
    </tr>
    </tr>
    <tr>
      <td>10:30 am</td>
      <td rowspan="3">Event 7</td>
      <td rowspan="6">Event 6</td>
    </tr>
    </tr>
    <tr>
      <td>10:35 am</td>
    </tr>
    <tr>
      <td>10:40 am</td>
      <td rowspan="4">Event 9</td>
    </tr>
    <tr>
      <td>10:45 am</td>
      <td rowspan="3">Event 8</td>
    </tr>
    <tr>
      <td>10:50 am</td>
    </tr>
    <tr>
      <td>10:55 am</td>
    </tr>
    <tr>
      <td>11:00 am</td>
    </tr>
  </tbody>
  </tr>
</table>

要玩的代码笔：https://codepen.io/gc-nomade/pen/ExgKRMz