querySelector работает толлько для первого элемента списка

[samdo]

Приветствую! Помогите, плиз, допилить код. Как сделать, чтобы в нижеуказанной "конструкции" JS срабатывал не только для первого элемента, но и для остальных с классом co-img. Пробовал querySelector заменить на querySelectorAll, не помогает.

var bg = document.querySelector('.co-img');
	window.addEventListener('mousemove', function(e) {
	let x = e.clientX / window.innerWidth;
	let y = e.clientY / window.innerHeight;  
	bg.style.transform = 'translate(-' + x * 150 + 'px, -' + y * 150 + 'px)';
});

<div class="co-block">
	<div class="co-img" style="background-image: url(imgpath);"></div>
</div>
<div class="co-block">
	<div class="co-img" style="background-image: url(imgpath);"></div>
</div>
<div class="co-block">
	<div class="co-img" style="background-image: url(imgpath);"></div>
</div>

Заранее СПАСИБО!

[ksa]

Пробовал querySelector заменить на querySelectorAll, не помогает

Простая замена методов и не поможет.
Первый метод возвращает один элемент, а второй целую коллекцию.
Так вот с коллекцией нужно работать как с коллекцией, а не одним эелементом. Т.е. нужно перебирать элементы коллекции и, получив очередной, что-то с ним делать...

bg = document.querySelector('.co-img')

Меняем на

bg = document.querySelectorAll('.co-img')

bg.style.transform = 'translate(-' + x * 150 + 'px, -' + y * 150 + 'px)';

Меняем на

bg.forEach(o => o.style.transform = 'translate(-' + x * 150 + 'px, -' + y * 150 + 'px)');

[samdo]

Преогромнейшее спасибо!