如何触发三个重叠div组成的维恩图的:hover过渡，实现悬浮交集时对应圆同时缩放

问题根因 #

三个圆形属于同级DOM元素，默认CSS :hover 伪类仅能触发当前被悬浮元素的样式变更，鼠标落在交集区域时只会触发层级最靠上的圆形的hover效果，无法同时作用于重叠的其他圆形。另外你现有代码里的过渡属性多写了多余逗号，会导致过渡失效，需要先修改为 transition: all 1s;。

方案1：纯CSS实现（支持CSS :has伪类的浏览器可用） #

通过父容器的:has()伪类判断当前悬浮覆盖的圆形组合，匹配对应规则触发多个圆形的缩放效果，修改后的CSS代码如下：

.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;
}

/* 仅悬浮蓝色非交集区域 */
.circles-container:has(.circle-blue:hover):not(:has(.circle-purple:hover)):not(:has(.circle-pink:hover)) .circle-blue,
/* 仅悬浮紫色非交集区域 */
.circles-container:has(.circle-purple:hover):not(:has(.circle-blue:hover)):not(:has(.circle-pink:hover)) .circle-purple,
/* 仅悬浮粉色非交集区域 */
.circles-container:has(.circle-pink:hover):not(:has(.circle-blue:hover)):not(:has(.circle-purple:hover)) .circle-pink,
/* 蓝紫双圆交集 */
.circles-container:has(.circle-blue:hover):has(.circle-purple:hover):not(:has(.circle-pink:hover)) .circle-blue,
.circles-container:has(.circle-blue:hover):has(.circle-purple:hover):not(:has(.circle-pink:hover)) .circle-purple,
/* 蓝粉双圆交集 */
.circles-container:has(.circle-blue:hover):has(.circle-pink:hover):not(:has(.circle-purple:hover)) .circle-blue,
.circles-container:has(.circle-blue:hover):has(.circle-pink:hover):not(:has(.circle-purple:hover)) .circle-pink,
/* 紫粉双圆交集 */
.circles-container:has(.circle-purple:hover):has(.circle-pink:hover):not(:has(.circle-blue:hover)) .circle-purple,
.circles-container:has(.circle-purple:hover):has(.circle-pink:hover):not(:has(.circle-blue:hover)) .circle-pink,
/* 三圆交集 */
.circles-container:has(.circle-blue:hover):has(.circle-purple:hover):has(.circle-pink:hover) .second-section-circle {
  transform: scale(1.1);
}

HTML代码无需修改。

方案2：JS实现（全浏览器兼容） #

如果需要兼容不支持:has()伪类的低版本浏览器，可以通过JS实时判断鼠标覆盖的圆形范围，批量触发缩放：

1. 删掉原CSS里的 .second-section-circle:hover 规则，保留其他样式
2. 页面添加如下JS代码即可：

const circles = document.querySelectorAll('.second-section-circle');
const container = document.querySelector('.circles-container');

// 判断鼠标坐标是否在圆形范围内
function isPointInCircle(circle, x, y) {
  const rect = circle.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  const radius = rect.width / 2;
  return Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)) < radius;
}

// 鼠标移动时更新所有圆形状态
container.addEventListener('mousemove', (e) => {
  const hoveredCircles = Array.from(circles).filter(circle => isPointInCircle(circle, e.clientX, e.clientY));
  circles.forEach(circle => circle.style.transform = 'scale(1)');
  hoveredCircles.forEach(circle => circle.style.transform = 'scale(1.1)');
});

// 鼠标移出容器时重置样式
container.addEventListener('mouseleave', () => {
  circles.forEach(circle => circle.style.transform = 'scale(1)');
});

内容的提问来源于stack exchange，提问作者mseabra