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

Question

[starkingdom]

Суть такова, есть блок, когда на него наводишь нужно чтобы картинка менялась только в том блоке, на который навёлся! А не во всех, навожу на второй, только в нём, как это реализовать?
надо чтоб было так:

вот так сейчас при наведении:

вот js

let companyItem = document.querySelectorAll('.company__item');
let webActive = document.querySelectorAll('.web-active');
let directionActive = document.querySelectorAll('.direction-active');

companyItem.forEach(e => {
    e.addEventListener('mouseover', () => {
        webActive.forEach(e => {
              e.src="img/web.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseout', () => {
        webActive.forEach(e => {
              e.src="img/web-static.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseover', () => {
        directionActive.forEach(e => {
              e.src="img/arrow-search-active.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseout', () => {
        directionActive.forEach(e => {
              e.src="img/arrow-search.svg";
        });
    });
});

Comments

[Сергей Соколов]

это бы лучше реализовать только средствами CSS.
Псевдокласс :hover при наведении. Псевдо-элементы ::before или ::after

Answer 1

[Антон Неверов]

При условии, что в .company__item находятся и .web-active, и .direction-active

let companyItem = document.querySelectorAll('.company__item');

companyItem.forEach(e => {
    e.addEventListener('mouseover', ({ target }) => {
        target.querySelectorAll('.web-active').forEach(e => {
            e.src="img/web.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseout', ({ target }) => {
        target.querySelectorAll('.web-active').forEach(e => {
            e.src="img/web-static.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseover', ({ target }) => {
        target.querySelectorAll('.direction-active').forEach(e => {
            e.src="img/arrow-search-active.png";
        });
    });
});

companyItem.forEach(e => {
    e.addEventListener('mouseout', ({ target }) => {
        target.querySelectorAll('.direction-active').forEach(e => {
            e.src="img/arrow-search.svg";
        });
    });
});

Comments

[starkingdom]

дай Бог тебе здоровье друг!

[starkingdom]

слушай, заметил такой нюанс, когда навожу на эти картинки теперь, сами картинки переключаются, как это попровить можно?

[starkingdom]

Вот если я навожу на что-то в блоке, то сразу скидывается