Как при наведении на элемент изменить стили его соседей?

Question

[zekin375]

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

Есть блоки с одинаковыми классами, стоит задача добавлять класс для всех блоков при наведении на один из них, на тот блок на который наводим, класс добавлять не надо.

Comments

[Banan44]

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

	<script>
		const block = document.querySelector('.block')
		block.addEventListener('mouseover', event => {
			if (event.target != block) event.target.classList.add('newClass') // Добавляем класс на дочерний элемент
		})
	</script>

Answer 1

[0xD34F]

const wrapper = document.querySelector('.block');
const blockSelector = '.block_one';
const activeClass = 'active';

wrapper.addEventListener('mouseover', onHover);
wrapper.addEventListener('mouseout', onHover);

function onHover({ type, target }) {
  const block = type === 'mouseover' && target.closest(blockSelector);
  this.querySelectorAll(blockSelector).forEach(n => {
    n.classList.toggle(activeClass, !!block && n !== block);
  });
}

UPD. Наконец-то дождались, теперь можно без js задачу решить:

.block:has(.block_one:hover) .block_one:not(:hover) {
  /* сюда переносим стили того класса, который через js добавлялся */
}