Как изменять CSS для всех элементов с одинаковым классом с помощью JavaScript?

Question

Как сделать чтобы чтобы стили применялись ко всем блокам, но не одновременно на все блоки, а только на тот который наводишь

var block = document.querySelector('.block');

block.onmouseover = function(e) {
  block.style.width = '200px';
};

block.onmouseout = function(e) {
 block.style.width = '100px';
};

body{
  background-color: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.block{
  width: 100px;
  height: 100px;
  background-color: #fff;
  margin-right: 40px;
  transition: .3s;
}

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Answer 1

var block = document.querySelectorAll('.block');

block.forEach(element=> (element.onmouseenter = function(e) {
  element.style.width = '200px';
}));

block.forEach(element=> (element.onmouseleave = function(e) {
 element.style.width = '100px';
}));

body{
  background-color: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.block{
  width: 100px;
  height: 100px;
  background-color: #fff;
  margin-right: 40px;
  transition: .3s;
}

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

БЛОГ НА HUSL

Как изменять CSS для всех элементов с одинаковым классом с помощью JavaScript?

Ответы (1 шт):