I am trying to dynamically apply an .inactive class to all elements in an array, except the one that is currently being hovered over. I want to accomplish this using the filter function, but I am unsure how to exclude the .item element that is triggering the mouseover event. At the moment, all items are receiving the .inactive class.
const items = document.querySelectorAll('.item');
[...items].forEach(link => {
link.addEventListener('mouseover', function() {
console.log(link)
const inactives = [...items].filter(item => link)
inactives.forEach(inactive => {
inactive.classList.add('inactive')
});
});
link.addEventListener('mouseout', function() {
[...items].forEach(item => {
item.classList.remove('inactive')
});
});
});.item.inactive {
opacity: 0.5;
}<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>