询问这是否可能 - 尝试在每个单元格的边界上的表格中创建悬停状态 - 但不是在外部。查看屏幕截图。我试图使用 box-shadow 但是你,运气不好。还使用边框移动悬停时的内容。谢谢。有任何想法吗?我尝试了很多东西。这些表是用数据表和动态数据生成的。
最佳答案
如何使用:before
伪元素进行样式显示?类似于以下内容:
td, th{
position:relative;
padding:10px;
border:1px solid lightgray;
}
th:hover:before{
position:absolute;
content:"";
background-color:green;
width:100%;
height:2px;
display:block;
left:0;
top:0;
}
tr:hover td:first-of-type:before{
position:absolute;
content:"";
background-color:green;
width:2px;
height:100%;
display:block;
left:0;
top:0;
}
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr><td>cell1</td><td>cell2</td></tr>
<tr><td>cell3</td><td>cell4</td></tr>
</tbody>
</table>
我编辑了代码以使用 tr:hover td:first-of-type:before
来突出显示行而不是每个单元格。
关于html - 尝试在表格边界内的表格标题和单元格中创建悬停状态,并且不移动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38489612/