当鼠标悬停在表格单元格上时，我想向单元格添加边框以突出显示它。但是当我这样做时，所有其他单元格的宽度和高度都会受到影响

Question

我有一个简单的介绍页面的以下 html 代码。在鼠标悬停（悬停）事件上，我将添加边框以突出显示单元格。但是当我使用现有的代码和 css 执行此操作时，所有单元格的高度和宽度都在增加。我该如何防止这种情况发生？我什至尝试在悬停时减小单元格的高度和宽度，但结果是相同的。我

.td_index_intro_1 {
max-width :500px;
max-height:300px;  
}
.td_index_intro_2 {
max-width: 500px;
max-height: 300px;
}
.td_index_intro_3 {
max-width: 500px;
max-height: 300px;
}
.td_index_intro_4 {
max-width: 500px;
max-height: 300px;
}

.td_index_intro_1:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_2:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_3:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_4:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}

<table class="table_intro" style="margin-left:200px; margin-top:50px;border-spacing:20px">   

<tr >
    <td class="td_index_intro_1">
        <img src="images/index_machovw.png" style="display:block;width:100%; height:100%">
    </td>
    <td class="td_index_intro_2">
        <img src="images/index_connect.png" style="display:block; width:100% ; height:100% ">
    </td>

</tr>
<tr>
    <td class="td_index_intro_3">
        <img src="images/index_docu.png" style="display:block; width:100% ; height:100%">
    </td>
    <td class="td_index_intro_4">
        <img src="images/index_admin.png" style="display:block; width:100% ; height:100%">
    </td>
   
</tr>
</table>

Answer 1

您可以将

border

更改为

outline

:

td {
  max-width :500px;
  max-height:300px;  
}

td:hover {
  outline: 4px solid darkblue;
  max-width: 492px;
  max-height: 292px;
  cursor: pointer;
}

<table class="table_intro" style="margin-left:200px; margin-top:50px;border-spacing:20px">   
<tr >
<td class="td_index_intro_1">
    <img src="images/index_machovw.png" style="display:block;width:100%; height:100%">
</td>
<td class="td_index_intro_2">
    <img src="images/index_connect.png" style="display:block; width:100% ; height:100% ">
</td>

</tr>
<tr>
<td class="td_index_intro_3">
    <img src="images/index_docu.png" style="display:block; width:100% ; height:100%">
</td>
<td class="td_index_intro_4">
    <img src="images/index_admin.png" style="display:block; width:100% ; height:100%">
</td>
   
</tr>
</table>