ホバリングDiv要素

Question

私は、他の5つのdiv（図参照）を保持し、矢印が（ピクチャの右側に）指し示されている方向にスライドします。私はCSSの：ホバー（hover）プロパティでこれを達成しました。しかし、それは目的を達成しましたが、私は単に結果を気に入らないだけです（スニペットを参照）。特定のマウスの位置はdivを元の位置に戻し、次に再びホバリングした位置に戻します。ホバープロパティを改善するためのアイデアはありますか？ピクチャー

body, html { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.body-container { 
 
\t position: fixed; 
 
\t overflow : hidden; 
 
\t left: 0; 
 
\t top: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-size: cover; 
 
\t overflow: hidden; 
 
} 
 

 
.ele-containers { 
 
\t width: 50%; 
 
\t overflow: hidden; 
 
\t height: 50%; 
 
\t position: absolute; 
 
\t transition: 0.6s; 
 
\t background: blue; 
 
\t border: 2px white solid; 
 
} 
 

 
#spring { 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 
#summer { 
 
\t top: 0; 
 
\t left: 50%; 
 
} 
 

 
#winter { 
 
\t top: 50%; 
 
\t left: 0; 
 
} 
 
#autumn { 
 
\t top: 50%; 
 
\t left: 50%; 
 
} 
 

 
#spring:before, #summer:before, #winter:before, #autumn:before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: white; 
 
\t border-radius: 50%; 
 
} 
 

 
#spring:hover { 
 
\t left: -10%; 
 
\t top:-10%; 
 
} 
 
#winter:hover{ 
 
\t left:-15%; 
 
\t top:65%; 
 
} 
 
#autumn:hover{ 
 
\t left:65%; 
 
\t top:65%; 
 
} 
 

 
#summer:hover { 
 
\t left: 65%; 
 
\t top:-15%; 
 
} 
 

 

 

 

 
#spring:before { 
 
\t bottom: -100px; 
 
\t right: -100px; 
 
} 
 
#summer:before { 
 
\t bottom: -100px; 
 
\t left: -100px; 
 
} 
 
#winter:before { 
 
\t top: -100px; 
 
\t right: -100px; 
 
} 
 
#autumn:before { 
 
\t top: -100px; 
 
\t left: -100px; 
 
} 
 

 
#about-circle { 
 
\t position: absolute; 
 
\t border-radius: 100%; 
 
\t transform: translate(-50%, -50%); 
 
\t display: flex; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255)); 
 
\t border: solid 4px rgba(255, 255, 255, .5); 
 
}

<div class="body-container"> 
 

 
\t \t <div class="ele-containers" id="spring">Spring</div> 
 
\t \t <div class="ele-containers" id="summer">Summer</div> 
 
\t \t <div class="ele-containers" id="winter">Winter</div> 
 
\t \t <div class="ele-containers" id="autumn">Autumn</div> 
 
\t \t <div class="circle-container" id="about-circle"></div> 
 
\t </div>

Answer 1

代わりのメインdivを移動するには、あなたは擬似要素を作成し、それらを移動します。

このようにすると、ホバー号が解決されます。

注意が、あなたは動きを少し調整する必要があるかもしれません、私がどれだけ-へ

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.body-container { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
.ele-containers { 
 
    width: 50%; 
 
    overflow: hidden; 
 
    height: 50%; 
 
    position: absolute; 
 
} 
 

 
#spring { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#summer { 
 
    top: 0; 
 
    left: 50%; 
 
} 
 

 
#winter { 
 
    top: 50%; 
 
    left: 0; 
 
} 
 

 
#autumn { 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
#spring:before, 
 
#summer:before, 
 
#winter:before, 
 
#autumn:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: white; 
 
    transition: 0.6s; 
 
    border-radius: 50%; 
 
    transform-origin: left top; 
 
} 
 

 
#spring:before { 
 
    left: calc(100% - 100px); 
 
    top: calc(100% - 100px); 
 
} 
 

 
#summer:before { 
 
    top: calc(100% - 100px); 
 
    left: -100px; 
 
} 
 

 
#winter:before { 
 
    top: -100px; 
 
    left: calc(100% - 100px); 
 
} 
 

 
#autumn:before { 
 
    top: -100px; 
 
    left: -100px; 
 
} 
 

 
#spring:after, 
 
#summer:after, 
 
#winter:after, 
 
#autumn:after { 
 
    content: ''; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transition: 0.6s; 
 
    background: blue; 
 
    border: 2px white solid; 
 
    transform-origin: left top; 
 
    z-index: -1; 
 
} 
 

 

 
#about-circle { 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    transform: translate(-50%, -50%); 
 
    display: flex; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255)); 
 
    border: solid 4px rgba(255, 255, 255, .5); 
 
} 
 

 
#spring:hover::before, 
 
#spring:hover::after { 
 
    transform: translate(-30%,-15%); 
 
} 
 

 
#winter:hover::before, 
 
#winter:hover::after { 
 
    transform: translate(-15%,30%); 
 
} 
 

 
#autumn:hover::before, 
 
#autumn:hover::after { 
 
    transform: translate(30%,15%); 
 
} 
 

 
#summer:hover::before, 
 
#summer:hover::after { 
 
    transform: translate(30%,-15%); 
 
}

<div class="body-container"> 
 

 
    <div class="ele-containers" id="spring">Spring</div> 
 
    <div class="ele-containers" id="summer">Summer</div> 
 
    <div class="ele-containers" id="winter">Winter</div> 
 
    <div class="ele-containers" id="autumn">Autumn</div> 
 
    <div class="circle-container" id="about-circle"></div> 
 
</div>

を表示するためにそれらを作りました