徘徊div元素

Question

所以我有一个容器div，其中包含5个其他divs（见图片），并在箭头指向的方向（图片右侧）悬停这些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>