如何使悬停的表格单元格动画延伸

在我的情况我有两种语言的表。在语言悬停时，我希望表格能够扩展到表格的全部宽度...当前代码仅适用于第一种语言...如果我将鼠标悬停在第二个元素上，则单元格仅支撑，不会延伸到左侧方向。

这里有一个片断

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

来源

2016-11-14 The Dude

“*我想表延长表中的全宽*” - 以什么样的方式是'

'没有充分的宽度'

'？ –

你有'a：hover'，但是HTML中没有锚元素？应该是'.locale-text：hover'？ – DBS

不明白你想要什么。请说明你期望的是什么 – Alexis

回答

如果您修复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>

来源

2016-11-14 14:35:36 Alexis

请尝试下面的代码：希望这会帮助你。

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

来源

2016-11-14 14:19:19

在答案中使用片段来显示工作版本。另外，你的答案只有一半有效。 –

这对第二个语言不起作用 – Alexis

编辑了代码.. pleaese现在检查 –

如何使悬停的表格单元格动画延伸

回答

相关问题