• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

230
Vistas
How can I trigger a :hover transition that includes three overlapping div elements (Venn diagram)

My problem is that I have this Venn diagram consisting of three div elements and I want to scale them with :hover, so that when I hover over an intersection all the circles that meet in the intersection scale to my defined value. In the moment I only get one circle to scale at the time.

How it should behave

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

about 3 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

I finalized Deon Rich's idea, so that the circles react to crossing their border, and not the border of the square described around them.

And also added a helper function and the loops so as not to manually list all the circles in the diagram. Now the script code does not depend on the number of circles in the diagram.

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>

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda