我试图以这样一种方式在文本的左侧添加边框,即当我将鼠标悬停在行上时,第一个单元格的边框会突出显示,并且用户知道他们所在的行。
这里是一个小提琴什么,我到目前为止有:
#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] 删除。
我来说两句