悬停Div元素

Question

所以我有一个容器div，其中包含5个其他div（见图），并且在悬停时这些div沿箭头指向的方向（图片右侧）滑动。我用CSS的简单实现了这个：hover属性。然而，它实现了它的目的，但我只是不喜欢结果（参见片段）;某些鼠标位置会导致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;
	transition: 0.6s;
	background: blue;
	border: 2px white solid;
}

#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;
	border-radius: 50%;
}

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

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




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

#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);
}

<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>

Answer 1

您可以创建伪元素并移动它们，而不是移动主div。

完成后，它将解决悬停问题。

注意，您可能需要稍微调整一下动作，我只是将它们设置为显示操作方法

＆＃13;

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;