操縱懸停div的位置

我有兩個單獨的div，我想在懸停狀態下彼此重疊。黃色的div是這樣做的，但我遇到了藍色div的問題。正如你所看到的，它默認情況下向右擴展。無論如何強迫它向左而不是增長它的容器。操縱懸停div的位置

這是我正在處理的一個簡單例子，所以很遺憾我99％確定.work-wrapper上的相對位置不得不說。

我一直在嘗試，容器和其他一些技巧上的最大寬度，但我現在失去。

.work-container { 
    width: 50%; 
    max-width: 50%; 
} 

.work-wrapper { 
    display: inline-block; 
    position: relative; 
    width: 49%; 
    transition: all ease 0.8s; 
}

來源

2016-07-25 Max Power

解決方案1：

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    width: 50%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover, .work-2:hover { 
 
    width: 100%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover + .work-2 { 
 
    width: 0%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

解決方案2：

在該方案中，沒有絕對或相對定位，讓你自由設置他們，但是你想要他們。

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    width: 50%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover, .work-container .work-2:hover { 
 
    width: 100% !important; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container:hover .work-1 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover + .work-2 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

來源

2016-07-25 07:09:06

感謝徘徊，但它需要是主箱需要相對定位，因爲我有絕對的div。 –

@MaxPower然後看到第二個解決方案。你應該能夠從那裏設計出你想要的確切解決方案。 –

謝謝老兄。你回答了我的問題，仍然有一個問題在我的項目中實現，但希望我能解決。 –

添加float:right類工作-2和z-index:6到.W-2。工作-2

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
} 
 

 
.work-wrapper { 
 
\t display: inline-block; 
 
\t position: relative; 
 
    width: 49%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1, .work-2 { 
 
\t transition: all ease 0.8s; 
 
    width: 100%; 
 
    padding-top: 100%; 
 
\t position: relative; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
\t z-index: 5; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    float:right; 
 
} 
 

 
.w-1:hover .work-1 { 
 
\t width: 202%; 
 
    float:left; 
 
} 
 

 
.w-2:hover .work-2 { 
 
\t width: 202%; 
 
    z-index:6; 
 
}

<div class="work-container"> 
 
<div class="work-wrapper w-1"> 
 
    <div class="work-1"></div> 
 
</div> 
 
<div class="work-wrapper w-2"> 
 
    <div class="work-2"></div> 
 
</div> 
 
</div>

來源

2016-07-25 07:18:51

請注意，由於z-indexing無法轉換，因此停止懸停時會出現不連續性。 –

工作正常，但必須給拒絕的答案。 +1雖然:) –

操縱懸停div的位置

回答

相關問題