CSS：轉換不能用於懸停

我有一個包含圖像和用戶名的框。最初寬度是固定的以節省空間，並且我想讓分部展開以顯示完整內容。我已經實現了這一點，但我無法添加transition以使動畫順暢。CSS：轉換不能用於懸停

爲什麼它不起作用？

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

來源

2017-10-06 Rithwik

問題是，您將寬度從特定值（9.5％）更改爲具有非特定值（自動）的寬度。爲了轉換到工作狀態，您需要在懸停狀態下使用特定值

因此請從width:auto更改爲width:100%。好吧，現在它可以工作，但它並不像你想的那樣工作。將hover-container的寬度更改爲auto。所以它會繼承它的子節點的寬度。通過設置width:9.5%它的孩子，它將具有相同的。然後，當孩子們擴大時，它也會擴大。下面

編輯

見段：如果你有多個，並排側，上hover-container和懸停使用max-width:9.5%，樣式添加到容器以及（最大寬度：100％）。它會擴大（有過渡），但只有文本的寬度。

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

來源

2017-10-06 10:17:39

嗨，謝謝你解釋得很好的答案。是的，它確實可以滿足我需要的一切。但是我還沒有把你的標記標記爲正確的答案。問題是連續有多個這樣的問題。我已經更新了問題中的代碼。將懸停容器的寬度更改爲自動會導致多個框之間有空白空間。 – Rithwik

@Rithwik用一個新的編碼編輯我的答案：D –

哈哈。：D 我只是在思考類似的問題。但你做到了。非常感謝。 – Rithwik

不能使用auto高度/寬度的過渡。獲得結果的最簡單方法之一是將max-width/max-height設置爲精確值，以使用transition對其進行動畫處理。查看這個link瞭解更多細節和其他選項以獲得輸出。

來源

2017-10-06 10:17:05

確定。感謝您的信息。非常感激。 – Rithwik

CSS：轉換不能用於懸停

回答

相關問題