javascript - 当我将鼠标悬停在它上面的东西上时，如何使边框变大？

Question

我试图让 4 个小盒子在您将鼠标悬停在它们上方的盒子上时变大，作为一种美学风格。

我曾尝试在网上和 StackOverflow 上寻找示例，但我尝试的每个示例都不起作用，因为它是在 JavaScript 中，我只是不理解它，或者它是在 J Query 中，但我没有使用 J Query (我不确定我是否应该)。这就是我想要得到的。 https://imgur.com/a/jy4ozCe

我已经完成了所有的 HTML 和 CSS，只是我似乎无法使该功能正常工作。我是 React 和 Javascript 的新手，现在有点迷茫。

我试过了

JS

function animation(color) {
  document.getElementsByClassName('animated-box').style.backgroundColor = 'color';
}

HTML

 <div className="hp-left">
        <div className="home-card-top-left">
            <iframe title="JSX" width="100%" height="100%" src="https://www.youtube.com/embed/rUvUKWbyMgM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
            <div className="animated-box"></div>
        </div>
        <div className="home-card-bottom-left" onmouseover={animation('red')} onmouseout={animation('white')}>
            <a href="https://www.gofundme.com/gamehubgg?fbclid=IwAR1QApuq8jTeihAAcx8Y_1i23PSDLXEo9nDocQvUHuOMIxVLMK6x2pqcRK0">
            <img
              className="haloimg"
              src={
                "https://zach-miller.com/wp-content/uploads/2017/03/its-giveaway-time.jpg"
              }
              width="50%"
              height="100%"
              alt="Halo Pic"
            />
          </a>
        </div>
   </div>

这是某人在 StackOverflow 上给出的答案，但它给了我

"TypeError: Cannot set property 'backgroundColor' of undefined"

这只是我想悬停在上面的“div”和框的片段。

我想将鼠标悬停在较大的部分上，让小盒子变大，直到它包围大盒子。我试图在 CSS 中这样做，但它在那里也不起作用，因为它在 div 后面。无论如何，我想用 JS 或 JSX 来做。

Answer 1

如果我正确理解你想要什么，是吗？如果我错了，请详细说明，并举例说明!

.box-hover {
  color: white;
  background: green;
  padding: 20px;
}

.box-hover:hover ~ * {
  border-width: 10px;
}

.box-border {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid black;
  margin: 10px;
  transition: .3s;
}

<div class='box-hover'>hover on me</div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>