Question

0

113

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>

10 months ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-04-08T13:15:57.202Z

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>