0
137
Views¿Cómo puedo activar una transición :hover que incluye tres elementos div superpuestos (diagrama de Venn)
Mi problema es que tengo este diagrama de Venn que consta de tres elementos div y quiero escalarlos con :hover , de modo que cuando paso el mouse sobre una intersección, todos los círculos que se encuentran en la intersección escalan a mi valor definido. De momento solo me sale un circulo a escala a la vez.
.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>
·
Santiago Trujillo
1 answers
Answer question0
Finalicé la idea de Deon Rich , para que los círculos reaccionen al cruzar su borde, y no el borde del cuadrado descrito alrededor de ellos.
Y también agregó una función de ayuda y los bucles para no enumerar manualmente todos los círculos en el diagrama. Ahora el código de script no depende de la cantidad de círculos en el diagrama.
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 }; } .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); } <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>
·
Santiago Trujillo
Report
Answer question