CSS：ホバー上で動作しない遷移

Question

イメージとユーザー名を含むボックスがあります。当初、スペースを節約するために幅が固定されていて、hover完全な内容を明らかにするために部門を拡大したいと思っています。私はこれを達成しましたが、アニメーションを滑らかにするためにtransitionを追加することはできません。

なぜ機能しないのですか？あなたが移行をauto高さ/幅を使用することはできません

.peer-person { 
 
    position: relative; 
 
    z-index: 1000; 
 
    width: 9.5%; 
 
    min-width: 66px; 
 
    margin: 0px 0px 5px 0px; 
 
    padding: 6px 0px 5px 0px; 
 
    display: inline-block; 
 
    border: 2px solid #efefef; 
 
    border-radius: 5px; 
 
    -webkit-transition: all 1s ease-in-out 0s; 
 
    -moz-transition: all 1s ease-in-out 0s; 
 
    transition: all 1s ease-in-out 0s; 
 
} 
 

 
.hover-container:hover>.peer-person { 
 
    z-index: 1001; 
 
    background-color: white; 
 
    width: auto; 
 
} 
 

 
.hover-container { 
 
    display: inline-block; 
 
    width: 9.5%; 
 
    min-width: 66px; 
 
} 
 

 
.peer p { 
 
    margin: 0px; 
 
    padding: 3px; 
 
    padding-bottom: 0px; 
 
    color: grey; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>1.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span> 
 
<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>2.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span> 
 
<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>3.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span>

Answer 1

問題は、特定の値（9.5％）から特定の値でない幅（auto）に幅を変更することです。作業に移行するには、ホバー状態で特定の値を使用する必要があります

width:autoからwidth:100%に変更してください。さて、それは動作しますが、あなたが望むように正確に動作しません。 hover-containerの幅をautoに変更します。それで、子供たちの幅を継承します。 width:9.5%を子供に設定すると、それと同じになります。そして、子供たちが拡大すると、それもまた拡大するでしょう。

EDIT以下

参照スニペット：あなたが1以上のものを持っている場合は、サイド・バイ・サイド、コンテナにスタイルを追加するだけでなく（：100％最大幅）、hover-container上とホバーにmax-width:9.5%を使用しています。テキストの幅だけ拡大します（遷移とともに）。

.peer-person { 
 
    position: relative; 
 
    z-index: 1000; 
 
    width: 9.5%; 
 
    min-width: 66px; 
 
    margin: 0px 0px 5px 0px; 
 
    padding: 6px 0px 5px 0px; 
 
    display: inline-block; 
 
    border: 2px solid #efefef; 
 
    border-radius: 5px; 
 
    -webkit-transition: all 1s ease-in-out 0s; 
 
    -moz-transition: all 1s ease-in-out 0s; 
 
    transition: all 1s ease-in-out 0s; 
 
} 
 

 
.hover-container:hover>.peer-person { 
 
    z-index: 1001; 
 
    background-color: white; 
 
    width: 100%; 
 
} 
 

 
.hover-container { 
 
    display: inline-block; 
 
    max-width: 9.5%; 
 
    min-width: 66px; 
 
-webkit-transition: all 1s ease-in-out 0s; 
 
    -moz-transition: all 1s ease-in-out 0s; 
 
    transition: all 1s ease-in-out 0s; 
 
} 
 
.hover-container:hover { 
 
    max-width:100%; 
 
    
 
    
 
} 
 

 
.peer p { 
 
    margin: 0px; 
 
    padding: 3px; 
 
    padding-bottom: 0px; 
 
    color: grey; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>1.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span> 
 
<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>2.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span> 
 
<span class="hover-container"> 
 
<span class="peer-person"> 
 
<a href="#" role="button" class="peer" aria-expanded="false"> 
 
<img src="http://via.placeholder.com/36x36" class="img-circle"> 
 
<p>3.LONGUSERNAMELONGLONG</p> 
 
</a> 
 
</span> 
 
</span>

Answer 2

。結果を取得する最も簡単な方法の1つはmax-width/max-heightを正確な値に設定してtransitionを使用してアニメーション化することです。詳細と出力を得るその他のオプションについては、linkをチェックしてください。