如何在悬停时扩展表格单元格动画

Question

我的css动画有问题。

在我的情况下，我有两种语言的表。在语言悬停时，我希望表格扩展到表格的全宽...当前代码仅适用于第一语言...如果我将鼠标悬停在第二个元素上，则单元格只会拉伸，它不会向左方向延伸。 / p>

这是一个片段

LOG.debug

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

Answer 1

如果您将table的尺寸修改为80px并将td宽度修改为50%，则您知道只有两个单元格，而是使用40px代替50%它不适用于第二个因为第一次尝试保留50% width。并在: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>

Answer 2

请尝试以下代码：希望这会对您有所帮助。

＆＃13;

＆＃13;

.locale-wrapper {
  width: 100%;
  height: 40px;
}
.locale-text {
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
  font-size: 16px;
  width: 2%;
  -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;
}
a {
  text-transform: uppercase;
}
.locale-text:hover {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;