javascript - 如何触发 :hover transition that includes three overlapping div elements (Venn diagram)

Question

我的问题是我有这个由三个 div 元素组成的维恩图，我想用 :hover 缩放它们，这样当我将鼠标悬停在一个交叉点上时，所有在交叉点相遇的圆圈都会缩放到我定义的值。目前我只能得到一个圆圈来缩放。

.circles-container {
  position: relative;
  width: 45.625rem;
  height: 45.625rem;
}

.circle-blue {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(187, 231, 254, 0.6);
  border-radius: 50%;
}

.circle-purple {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(211, 181, 229, 0.6);
  border-radius: 50%;
}

.circle-pink {
  position: absolute;
  right: 8.59375rem;
  left: 8.59375rem;
  bottom: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(255, 212, 219, 0.6);
  border-radius: 50%;
}

.second-section-circle {
  transition: all, 1s;
}

.second-section-circle:hover {
  transform: scale(1.1);
}

<div class="circles-container">
  <div class="circle-blue second-section-circle"></div>
  <div class="circle-purple second-section-circle"></div>
  <div class="circle-pink second-section-circle"></div>
</div>

Answer 1

一种仅使用 CSS 的解决方案，需要使用一个 CSS 变量来控制大小的更多元素:

.circles-container {
  --s:150px; /* adjust this to control the size*/
  width:  var(--s);
  height: var(--s);
  margin:calc(var(--s)/3) auto;
  display:grid;
}
.circles-container > * {
  grid-area: 1/1;
  transition: all 1s;
  border-radius:50%;
  position:relative;
}
.circle-blue {
  background: rgba(187, 231, 254, 0.6);
  top:calc(var(--s)/3);
}
.circle-purple {
  background: rgba(211, 181, 229, 0.6);
  left:calc(0.866*calc(var(--s)/3));
  top: calc(-0.5 *calc(var(--s)/3));
}
.circle-pink {
  background: rgba(255, 212, 219, 0.6);
  right:calc(0.866*calc(var(--s)/3));
  top:  calc(-0.5 *calc(var(--s)/3));
}
.circles-container > *:nth-child(1) {
   top:calc(var(--s)/3);
   clip-path:circle(calc(var(--s)/2) at 21% 0%);
}
.circles-container > *:nth-child(2) {
   right:calc(0.866*calc(var(--s)/3));
   top:  calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 108% 50%);
}
.circles-container > *:nth-child(3) {
   left:calc(0.866*calc(var(--s)/3));
   top: calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 21% 100%);
}
.circles-container > *:nth-child(4) {
  clip-path: polygon(29% 38%, 50% 34%, 71% 38%, 64% 60%, 50% 74%, 36% 60%);
}
.circles-container > *:nth-child(-n + 4) {
  z-index:1;
}
.circles-container > *:nth-child(1):hover ~ .circle-pink,
.circles-container > *:nth-child(1):hover ~ .circle-blue,
.circles-container > *:nth-child(2):hover ~ .circle-pink,
.circles-container > *:nth-child(2):hover ~ .circle-purple,
.circles-container > *:nth-child(3):hover ~ .circle-blue,
.circles-container > *:nth-child(3):hover ~ .circle-purple,
.circles-container > *:nth-child(4):hover ~ *,
.circles-container > *:nth-child(n + 5):hover {
  transform: scale(1.15);
}

<div class="circles-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="circle-blue"></div>
  <div class="circle-purple"></div>
  <div class="circle-pink"></div>
</div>

为额外的 div 添加背景颜色以理解谜题:

.circles-container {
  --s:150px; /* adjust this to control the size*/
  width:  var(--s);
  height: var(--s);
  margin:calc(var(--s)/3) auto;
  display:grid;
}
.circles-container > * {
  grid-area: 1/1;
  transition: all 1s;
  border-radius:50%;
  position:relative;
}
.circle-blue {
  background: rgba(187, 231, 254, 0.6);
  top:calc(var(--s)/3);
}
.circle-purple {
  background: rgba(211, 181, 229, 0.6);
  left:calc(0.866*calc(var(--s)/3));
  top: calc(-0.5 *calc(var(--s)/3));
}
.circle-pink {
  background: rgba(255, 212, 219, 0.6);
  right:calc(0.866*calc(var(--s)/3));
  top:  calc(-0.5 *calc(var(--s)/3));
}
.circles-container > *:nth-child(1) {
   top:calc(var(--s)/3);
   clip-path:circle(calc(var(--s)/2) at 21% 0%);
}
.circles-container > *:nth-child(2) {
   right:calc(0.866*calc(var(--s)/3));
   top:  calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 108% 50%);
}
.circles-container > *:nth-child(3) {
   left:calc(0.866*calc(var(--s)/3));
   top: calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 21% 100%);
}
.circles-container > *:nth-child(4) {
  clip-path: polygon(29% 38%, 50% 34%, 71% 38%, 64% 60%, 50% 74%, 36% 60%);
}
.circles-container > *:nth-child(-n + 4) {
  z-index:1;
}
.circles-container > *:nth-child(1):hover ~ .circle-pink,
.circles-container > *:nth-child(1):hover ~ .circle-blue,
.circles-container > *:nth-child(2):hover ~ .circle-pink,
.circles-container > *:nth-child(2):hover ~ .circle-purple,
.circles-container > *:nth-child(3):hover ~ .circle-blue,
.circles-container > *:nth-child(3):hover ~ .circle-purple,
.circles-container > *:nth-child(4):hover ~ *,
.circles-container > *:nth-child(n + 5):hover {
  transform: scale(1.15);
}

<div class="circles-container">
  <div style="background:red;"></div>
  <div style="background:green;"></div>
  <div style="background:purple;"></div>
  <div style="background:black;"></div>
  
  <div class="circle-blue"></div>
  <div class="circle-purple"></div>
  <div class="circle-pink"></div>
</div>