使用CSS“Hover”伪类突出显示悬停时的表格行和列
在此场景中,突出显示悬停时的表格行和列可以使用像
使用伪元素进行突出显示
为了突出显示行和列,我们使用 ::before 和 ::after 伪元素元素。这些创建绝对定位的虚拟元素,存在于文档流之外:
td:hover::before, /* Highlight rows on hover */ .row:hover::before { background-color: #ffa; content: '<pre class="brush:php;toolbar:false"><tr class="row"> <th class="col">50kg</th> <th class="col">55kg</th> <th class="col">60kg</th> <th class="col">65kg</th> <th class="col">70kg</th> </tr>a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, /* Highlight columns on hover */ .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }
用于特异性的CSS类
在HTML中,我们添加像 . row 和 .col 来明确指定目标元素:
结论
此解决方案纯粹使用 CSS 突出显示悬停时的行和列,并且不依赖于JavaScript 或 jQuery。它适用于所有现代浏览器,并在旧版浏览器中正常降级。
以上是如何仅使用 CSS 突出显示悬停时的表格行和列?的详细内容。更多信息请关注PHP中文网其他相关文章!