如何使 table 单元格动画在悬停时延伸
How to make table cell animation extend on hover
我对 css 动画有疑问。
就我而言,我有 table 两种语言。在语言悬停时,我希望 table 扩展到 table 的整个宽度...当前代码仅适用于第一语言...如果我将鼠标悬停在第二个元素上,单元格只会摇晃,它不会'向左延伸。
这是一个片段
.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>
请尝试以下代码:希望对您有所帮助。
.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>
如果您将 table
的大小固定为 80px
并将 td
宽度固定为 50%
您知道只有两个单元格然后使用 40px
而不是 50%
它在第二个上不起作用,因为第一个尝试保持 50%
的 width
。并在 px
中修正你的 :hover
宽度。
工作示例:
.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>
我对 css 动画有疑问。
就我而言,我有 table 两种语言。在语言悬停时,我希望 table 扩展到 table 的整个宽度...当前代码仅适用于第一语言...如果我将鼠标悬停在第二个元素上,单元格只会摇晃,它不会'向左延伸。
这是一个片段
.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>
请尝试以下代码:希望对您有所帮助。
.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>
如果您将 table
的大小固定为 80px
并将 td
宽度固定为 50%
您知道只有两个单元格然后使用 40px
而不是 50%
它在第二个上不起作用,因为第一个尝试保持 50%
的 width
。并在 px
中修正你的 :hover
宽度。
工作示例:
.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>