0
423
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 pase 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
3 answers
Answer question0
Puede lograr esto, pero necesitará un poco de JavaScript. No te preocupes, no es nada demasiado complicado. Lo que puede hacer es obtener las dimensiones de cada círculo usando el método element.getBoundingClientRect() , así...
let blue = document.querySelector(".circle-blue").getBoundingClientRect(); let purple = document.querySelector(".circle-purple").getBoundingClientRect(); let pink = document.querySelector(".circle-pink").getBoundingClientRect();Y luego, cada vez que el usuario mueve el mouse, puede probar si el mouse está o no sobre un elemento determinado, y si lo está, puede escalarlo INDEPENDIENTEMENTE de qué elemento se superpone a otro, lo que hace que cualquier círculo se escale, incluidos los círculos. incluido en la intersección...
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)"; } }); .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; } <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
Report
0
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
0
Una solución solo de CSS que requiere más elementos con una variable de CSS para controlar el tamaño:
.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>Agregue colores de fondo a los divs adicionales para comprender el rompecabezas:
.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>
·
Santiago Trujillo
Report
Answer question