如何使表格单元动画扩展到鼠标悬停?

I have a problem with css animation.

我对css动画有问题。

In my case I have table with 2 languages. On language hover, I want the table to extend to full width of the table... current code works only on first language... If I hover over second element the cell only strutters, it doesn't extend to left direction.

在我的例子中，我有两种语言的表。在语言悬停上，我希望表可以扩展到表的全宽度……目前的代码只适用于第一语言……如果我把鼠标悬停在第二个元素上，那么它就不会向左转。

Here's a snippet

这里有一个片段

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

2 个解决方案

#1

If you fix the size of your table to 80pxand your tdwidth to 50% you know that there's only two cell then use 40px instead of 50%it doesn't work on the second cause the first try to keep his 50% of width. And fix your :hoverwidth in px too.

如果你把表的大小调整到80pxand你的tdwidth到50%你就会知道只有两个cell然后使用40px而不是50%它不会在第二种情况下工作第一个尝试保持50%的宽度。并修正你的:hoverwidth在px。

Working example :

工作的例子:

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

#2

Please try the below code: Hope this will help you.

请试试下面的代码:希望这对您有帮助。

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

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

#1