小编mse*_*bra的帖子

如何触发包含三个重叠 div 元素的 :hover 转换（维恩图）

我的问题是，我有一个由三个 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: …

Run Code Online (Sandbox Code Playgroud)

html javascript css hover venn-diagram

mse*_*bra

2021 10-24

33
推荐指数

3
解决办法

1905
查看次数