那些遇到过的问题

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

mse*_*bra 33 html javascript css hover venn-diagram

我的问题是，我有一个由三个 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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Tem*_*fif 20

一种纯 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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

为额外的 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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Gle*_*sky 15

我最终确定了Deon Rich 的想法，以便圆圈对跨越其边界做出反应，而不是对它们周围描述的正方形的边界做出反应。

并且还添加了辅助函数和循环，以免手动列出图中的所有圆圈。现在脚本代码不依赖于图中圆圈的数量。

https://codepen.io/glebkema/pen/OJjNwzd

let circlesElements = document.getElementsByClassName("second-section-circle");
let circlesInfo = [];

for (let elem of circlesElements) {
    circlesInfo.push(getCircleInfo(elem));
}

// console.log(circlesInfo);

window.addEventListener("mousemove", (e) => {
    for (let info of circlesInfo) {
        let deltaX = e.pageX - info.centerX;
        let deltaY = e.pageY - info.centerY;
        if (deltaX * deltaX + deltaY * deltaY <= info.radius2) {
            // if mouse is over element, scale it...
            info.elem.style.transform = "scale(1.2)";
        } else {
            // otherwise, dont scale it...
            info.elem.style.transform = "scale(1)";
        }
    }
});

function getCircleInfo(elem) {
    let rect = elem.getBoundingClientRect();
    let radius = (rect.right - rect.left) / 2;
    return {
        elem: elem,
        centerX: (rect.right + rect.left) / 2,
        centerY: (rect.bottom + rect.top) / 2,
        radius2: radius * radius
    };
}
Run Code Online (Sandbox Code Playgroud) 
.circles-container {
    position: relative;
    width: 45.625rem;
    height: 45.625rem;
}

.second-section-circle {
    position: absolute;
    width: 28.4375rem;
    height: 28.4375rem;
    border-radius: 50%;
    transition: all, 1s;
}

.circle-blue {
    left: 0rem;
    top: 0rem;
    background-color: rgba(187, 231, 254, 0.6);
}

.circle-pink {
    right: 8.59375rem;
    left: 8.59375rem;
    bottom: 0rem;
    background-color: rgba(255, 212, 219, 0.6);
}

.circle-purple {
    right: 0rem;
    top: 0rem;
    background-color: rgba(211, 181, 229, 0.6);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="circles-container">
    <div class="second-section-circle circle-blue"></div>
    <div class="second-section-circle circle-purple"></div>
    <div class="second-section-circle circle-pink"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Deo*_*ich 13

您可以实现这一点，但您需要一点 JavaScript。别担心，没什么太复杂的。您可以做的是使用该方法获取每个圆的尺寸element.getBoundingClientRect()，就像这样......

let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();
Run Code Online (Sandbox Code Playgroud)

然后，每次用户移动鼠标时，您都可以测试鼠标是否位于给定元素上方，如果是，则可以缩放它，无论哪个元素与另一个元素重叠，从而导致任何圆圈缩放，包括圆圈包含在交叉路口...

let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();
Run Code Online (Sandbox Code Playgroud) 
let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();

window.addEventListener("mousemove", (e) => {
  let x = e.pageX,y = e.pageY;

  //test blue...
  if (x > blue.left && x < blue.right && y > blue.top && y < blue.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-blue").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-blue").style.transform = "scale(1)";
  }

  //test purple...
  if (x > purple.left && x < purple.right && y > purple.top && y < purple.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-purple").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-purple").style.transform = "scale(1)";
  }

  //test pink...
  if (x > pink.left && x < pink.right && y > pink.top && y < pink.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-pink").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-pink").style.transform = "scale(1)";
  }
});
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud)

  • 这存在碰撞箱问题，因为您将圆形视为正方形。您可以通过使用欧几里德距离公式来解决此问题 - 如果到圆心的绝对距离小于其宽度的一半，则将其扩展。 (3认同)

归档时间：

查看次数：

1905 次

最近记录：

4 年，2 月 前
相关归档
在PHP中,var_dump或print_r的JavaScript等价物是什么？ 273
使用CSS从段落的第二行开始缩进 88
多个字体权重,一个@ font-face查询 85
使用Javascript加载jQuery并使用jQuery 74
居中引导输入字段 55
何时在DOM环境中进行重排？ 50
如何在Javascript中实现安全的OAuth2消费？ 45
HTML CSS LI Wrapping 23
如何在CSS中删除ul中的特定项目符号？ 21
如何在内联有序列表中显示数字？ 20
难疑归档
什么是"大O"符号的简单英语解释？ 4851
数据库索引如何工作？ 2335
什么是MVP和MVC,有什么区别？ 2081
如何修改指定的提交？ 2077
有没有办法对字符串进行子串？ 1995
如何在没有换行或空格的情况下打印？ 1760
在JavaScript中停止setInterval调用 1332
如何在JavaScript正则表达式中访问匹配的组？ 1277
Django会扩展吗？ 1101
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081