我正在努力做到这一点,当我悬停其中一个单元格时,它会变得更大,而所有其他单元格都变得更小 (但不会消失),但我也不希望单元格扩展到表格之外或使表格的边框变大。
如何解决?
CSS 代码:
.Grid_Options {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
font-family: Titillium Web;
background-color: #C0C0C0;
border: 0;
}
.Grid_Options td {
width: 300px;
height: 200px;
transition: 0.5s;
font-size: 35px;
color: black;
}
.Grid_Options td:hover {
padding: 15px;
position: relative;
background-color: #686868;
color: #DDD;
}
HTML代码:
<table class="Grid_Options" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
</tbody>
</table>
最佳答案
I also don't want the cell to expand outside the table or make the borders of the table bigger.
我们可以通过删除 :hover
上的 padding
大小增加,并将其替换为 transform: scale
来实现。这不会影响 CSS 中任何其他元素的流程。
请注意,我们现在还需要将 overflow: hidden
添加到表格中,这样缩放后的单元格就不会溢出边缘。
.Grid_Options {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
font-family: Titillium Web;
background-color: #C0C0C0;
border: 0;
overflow: hidden; /* add this */
}
.Grid_Options td {
width: 300px;
height: 200px;
transition: 0.5s;
font-size: 35px;
color: black;
}
.Grid_Options td:hover {
transform: scale(1.1); /* add this */
background-color: #686868;
color: #DDD;
}
<table class="Grid_Options" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
<tr>
<td>Placeholder</td>
<td>Placeholder</td>
</tr>
</tbody>
</table>
关于html - 将鼠标悬停在表格上的某个单元格上时,试图使其他单元格收缩并使一个单元格扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46433002/