Question

每当您将4个小盒子悬停在它们上方的盒子上时，我都会尝试使其变得更大，这是一种美学风格。

我尝试过在线和在StackOverflow上查找示例，但是我尝试的每个示例都无法正常运行，因为它在JavaScript中，我只是不理解，或者在J Query中，并且我没有使用J Query（我不确定是否应该）。这就是我想要得到的。 https://imgur.com/a/jy4ozCe

除了似乎无法使该功能正常工作以外，我已经完成了所有HTML和CSS。我是React和Java的新手，此刻我迷路了。

我尝试过

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：无法设置未定义的属性'backgroundColor'”

这只是我要悬停在框上的“ 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>

Answer 2

您可以使用state和handleMouseHover通过以下方式进行操作：

<div
  onMouseEnter={this.handleMouseHover}
  onMouseLeave={this.handleMouseHover}
>

示例：https://codesandbox.io/s/j4x14q6q35

对于onhover style，您可以使用transform: scale。

Answer 3

对不起，我不知道jsx，这里是普通js））））

let
  boxHover = document.querySelector('.box-hover'),
  boxBorder = document.querySelectorAll('.box-border');

boxHover.addEventListener("mouseover", function() {
  for (let i = 0; i < boxBorder.length; i++) {
    boxBorder[i].style.borderWidth = '10px'
  }
})

.box-hover {
  color: white;
  background: green;
  padding: 20px;
  border: 1px solid black;
}

.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>

将边框悬停在边框上方时，如何使边框变大？

3 个答案: