html - 在悬停表格单元格上,根据悬停单元格的行高突出显示所有相应的单元格/行
问题描述
我正在尝试使用 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
推荐阅读
- python - 比较 Pandas Dataframe 时间窗口内的布尔变量
- asp.net-core - AzureADB2C.UI - 访问 OpenIdConnectEvents (OnTokenValidated)
- javascript - 用于 Web 应用程序自动化的浏览器堆栈的替代方案
- git - .gitmodules 和 .git/config 之间的同步
- immer.js - immer 的原始函数为代理对象返回 undefined
- javascript - pdf在一个文件中制作
- python - 在 Django 中减去两个 DateTime 字段
- firebase - 从 Angular 和 Firebase 服务器发送推送通知
- windows-forms-designer - 有没有办法用 Windows 窗体中的代码发送图片?
- java - 如何使用自定义 AuthenticationConverter 配置 Spring WebFlux 身份验证