当将鼠标悬停在桌子上的那个单元格上时，尝试使其他单元格缩小并且一个单元格扩展

Question

当我悬停其中一个单元格时，我试图这样做，它会更大，所有其他单元格更小< / strong> （但不会消失），但我也不希望单元格扩展到表格之外或者使表格的边框更大。

如何解决这个问题？

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

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

Answer 1

  

我也不希望细胞扩展到桌子外面或使桌子边框更大。

我们可以通过移除padding上的:hover尺寸增加，并将其替换为transform: scale来实现此目的。这不会影响CSS中任何其他项的流动。

请注意，我们现在还需要在表格中添加overflow: hidden，这样缩放后的细胞就不会溢出边缘。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

Jon Uleis给出了完美答案。但是如果你还需要缩小其他单元格，这里修改了css。

.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:hover td {
  transform: scale(0.9);
}
.Grid_Options:hover 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>

您可能还想尝试使用scaleX转换函数而不是缩放来保持行高不变。