我試圖解決flexbox問題,我想每行有三個div,首先大小相等,但是當懸停div時,該增長和其他的在同一行收縮。以爲我已經解決了它,直到我嘗試了多行。使彈性項目展開懸停,縮小其兄弟姐妹
我想要的是當懸停第三個div時,它會縮小第一個和第二個div,並保持其餘不變。我無法弄清楚這一部分。
以下是我的單排工作解決方案。
此佈局是否也可以在多行上工作?
我是否必須將每行包裝在單獨的容器中,還是有辦法解決這個問題?
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box {
width: 33%;
flex: 1;
}
.box:hover {
flex-grow: 3;
}
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
你只想要第二列到懸停成長? – Kushtrim
說我有6個盒子的div(每行3行2列),我把第二個div懸停,我想第二個div擴大,div 1&3縮小,而div 4-6保持不變。 – yayheartbeat
這或多或少是不可能的,主要是因爲你需要檢測哪個行是histed元素,然後只在該行上增長/縮小元素,並且_previous sibling_沒有選擇器。 – LGSon