我试图以这样一种方式在文本的左侧添加边框，即当我将鼠标悬停在行上时，第一个单元格的边框会突出显示，并且用户知道他们所在的行。
这里是一个小提琴什么，我到目前为止有：
#table {
border: 1px solid#e9e9e9;
}
tr:hover {
background-color: #e9e9e9;
}
tr:hover > td:first-child {
border-left: 2px solid #1B8645;
}<table id="table">
<tr>
<th>Status</th>
<th>Price</th>
<th>Address</th>
</tr>
<tbody>
<tr>
<td>Active</td>
<td>8742</td>
<td>5476235street</td>
</tr>
<tr>
<td>Active</td>
<td>8742</td>
<td>5476235street</td>
</tr>
<tr>
<td>Active</td>
<td>8742</td>
<td>5476235street</td>
</tr>
<tr>
<td>Active</td>
<td>8742</td>
<td>5476235street</td>
</tr>
<tr>
<td>Active</td>
<td>8742</td>
<td>5476235street</td>
</tr>
</tbody>
</table>但是，从小提琴中可以看出，当我将鼠标悬停在行上时，文本会被稍微压一下，并使悬停显得凌乱和扭曲。我试图以这样一种方式设置一行，即当鼠标悬停时，不应将文本推开，并且表格内容也不应移动。
这是将边框应用于悬停的方式：
tr:hover > td:first-child {
border-left: 2px solid #1B8645;
}
您应该添加一条透明的色线以确保没有悬停状态
tr>td:first-child{
border-left: 2px solid transparent;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句