每当你将鼠标悬停在它们顶部的盒子上时,我试图让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:无法设置未定义的属性'backgroundColor'”
这只是我想悬停在盒子上的“div”的片段。
我想将鼠标悬停在较大的部分上,使小盒子长大,直到它包围着大盒子。我试图在CSS中这样做,但它不会在那里工作,因为它在div后面。无论如何我想用JS或JSX做。
你可以使用state
和handleMouseHover
来做到:
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
示例:https://codesandbox.io/s/j4x14q6q35
对于onhover style
,您可以使用transform: scale
。
如果我理解你想要的是什么,是吗?如果我错了,请提供更多细节,用例子!
.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>
对不起,我不知道jsx,这里是vanilla 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>