I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover over one of the child circles, the parent should also turn red.
Below is my current code snippet:
var parentDiv = document.getElementById('parentDiv');
var largeDiv = document.getElementById('large');
var div = 360 / 6;
var radius = 150;
var offsetToChildCenter = 50;
var offsetToParentCenter = parseInt(largeDiv.offsetWidth / 2); //assuming parent is square
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
var childDiv = document.createElement('div');
childDiv.className = 'small';
childDiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
childDiv.style.top = (y + totalOffset).toString() + "px";
childDiv.style.left = (x + totalOffset).toString() + "px";
childDiv.style.width = `${offsetToChildCenter * 2}px`
childDiv.style.height = `${offsetToChildCenter * 2}px`
childDiv.innerHTML = "Example Text"
parentDiv.appendChild(childDiv);
}#large {
position: relative;
margin: 150px;
width: 150px;
height: 150px;
border-radius: 150px;
background-color: white;
color: red;
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}
.small {
position: absolute;
border-radius: 150px;
background-color: white;
color: red;
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}
.small:hover {
background-color: red;
color: white;
}
.small:active {
background-color: red;
color: white;
box-shadow: 0px 0px 20px red;
}
/* for centering */
html {
display: flex;
height: 100%;
}
body {
margin: auto
}<head>
<title></title>
<link rel='stylesheet' href='styles.css' />
</head>
<body>
<div id="parentDiv">
<div id="large"> Example Center Text</div>
</div>
<script src="calc.js"></script>
</body>To address the issue, I attempted to create an additional empty parent div and made the large circle a sibling of the small circles. However, the small circles did not center themselves around the large circle as intended.
As a beginner in HTML/CSS/JS, any assistance or guidance would be greatly appreciated!