Как сделать так, чтобы бордюр становился больше, когда я наводил курсор на что-то поверх него?
Я пытаюсь сделать 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.
Попробуйте getElementsByClassName('haloimg')
Извините, ребята, я пытался сократить код, потому что он выглядел запутанным, но я вырезал часть коробки из первой «домашней карты-вверху-слева». Извиняюсь!
Я вернул «анимированную коробку».
Когда я вырезал его, я вырезал его из StackOverflow. Это все еще было в моем коде на случай, если это сбивает с толку. Я до сих пор не знаю, что делать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если я правильно понимаю, что вы хотите, не так ли? Если я ошибаюсь, пожалуйста, дайте более подробную информацию с примерами!
.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, а не с помощью css:hover
Извините, я не знаю 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>Вы можете сделать это, используя state и handleMouseHover с помощью:
<div
onMouseEnter = {this.handleMouseHover}
onMouseLeave = {this.handleMouseHover}
>
Пример: https://codesandbox.io/s/j4x14q6q35
Для onhover style вы можете использовать transform: scale.
Но есть ли у вас элемент с именем класса «animated-box»? я ничего не вижу