如何使懸停的表格單元格動畫延伸

在我的情況我有兩種語言的表。在語言懸停時，我希望表格能夠擴展到表格的全部寬度...當前代碼僅適用於第一種語言...如果我將鼠標懸停在第二個元素上，則單元格僅支撐，不會延伸到左側方向。

這裏有一個片斷

.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現在檢查 –

相關問題