尝试在表格标题中创建悬停状态＆amp;表格范围内的单元格和也没有它改变内容

Question

询问是否可行 - 尝试在每个单元格边框的表格中创建悬停状态 - 但不在外部。看屏幕截图。我试图使用盒子阴影，但是，没有运气。还使用边框移动悬停时的内容。谢谢。有任何想法吗？我尝试了很多东西。表格是使用数据表和动态数据生成的。

Answer 1

如何使用:before伪元素进行样式显示？如下所示：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我已编辑代码以使用tr:hover td:first-of-type:before突出显示行而不是每个单元格。