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.
.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>CodePudding user response：
You can acheive this, but you'll need a little javascript. Dont worry, its nothing too complicated. What you can do is get the dimensions for each circle using the element.getBoundingClientRect() method, like so...
let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();
And then each time the user mover the mouse, you can test weather or not the mouse is over a given element, and if it is, you can scale it REGARDLESS of what element is overlapping another, therefore causing any circle to scale, including circles included in the intersection...
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>CodePudding user response：
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) => {
let x = e.pageX,
y = e.pageY;
for (let info of circlesInfo) {
if (
Math.pow(x - info.centerX, 2) Math.pow(y - info.centerY, 2) <=
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();
return {
elem: elem,
centerX: (rect.right rect.left) / 2,
centerY: (rect.bottom rect.top) / 2,
radius2: Math.pow((rect.right - rect.left) / 2, 2)
};
}.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>CodePudding user response：
A CSS only solution that requires more elements with one CSS variable to control the sizing:
.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 4):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>