css - 如何使表格单元格动画在悬停时延伸

Question

我对 CSS 动画有疑问。

在我的例子中，我有包含 2 种语言的表格。在语言悬停时，我希望表格扩展到表格的整个宽度...当前代码仅适用于第一语言...如果我将鼠标悬停在第二个元素上，单元格只会断断续续，它不会扩展到左侧。

这是一个片段

.locale-wrapper {
    width: 80px;
    height: 40px;    
}

.locale-text {
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
  font-size: 16px;
  width: 50%;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;  
}

.locale-text:hover {
  width: 100%;
}

<table class="locale-wrapper">
  <tr>
    <td class="locale-text">SL</td>
    <td class="locale-text">EN</td>
  </tr>
</table>

Answer 1

如果您将 table 的大小固定为 80px，将 td 的宽度固定为 50%，您知道只有两个单元格然后使用 40px 而不是 50% 它在第二个上不起作用因为第一个尝试保持他的 50% 宽度。并将你的 :hover 宽度也修改为 px。

工作示例:

.locale-wrapper {
    width: 80px;
    height: 40px;    
}

td.locale-text{
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
  font-size: 16px;
  width: 40px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;  
}

td.locale-text:hover {
  width: 80px;
}

<table class="locale-wrapper">
  <tr>
    <td class="locale-text">SL</td>
    <td class="locale-text">EN</td>
  </tr>
</table>