我正在尝试使用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选择技术来执行此操作。
提前致谢
（在等待反馈时）
您可以使用从悬停的单元格提取的半透明伪，然后将其悬停在第一列中的单元格前面。
Javascript和自定义CSS可以帮助您简化我先前链接的演示想法中的代码。
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>可使用的codepen：https ://codepen.io/gc-nomade/pen/ExgKRMz
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句