ホバー上のdivの位置を操作する

Question

私はホバー状態でお互いに重なり合うように2つの別々のdivを持っています。黄色のdivはこれをやっていますが、青いdivに問題があります。ご覧のように、デフォルトでは右に拡大しています。容器を栽培するのではなく、それを左に強制する方法はありますか？

これは私が作業しているものの単純化された例です。残念ながら私は99％の.work-wrapperの相対的な位置を確かめています。

https://jsfiddle.net/04vjcfLe/5/

私は、コンテナおよびその他のいくつかのトリック上のmax-widthを試してみたが、現在は失われています。

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

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

Answer 1

解決方法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>

Answer 2

.W-2をするには、クラスの仕事-2およびz-index:6にfloat:rightを追加：ホバー.work-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>