потом querySelectorAll по классе

Сделал

document.querySelectorAll('.box').forEach((item) => {
 item.addEventListener('onmouseover', () => {
   document.getElementById("text-ca").style.display = "block";
   document.getElementById("text-hover").style.display = "none";
 });
 item.addEventListener('onmouseout', () => {
   document.getElementById("text-ca").style.display = "none";
   document.getElementById("text-hover").style.display = "block";
 });
});

бегите по циклу и раздайте уникальный data-id

серьёзно работай с классами

с ними работайте )

или сразу раздайте data-id

А чем ID хуже?

ТЕМ ЧТО ОН УНИКАЛЬНЫЙ

id должен быть уникальным

Один ID у одного элемента

пример про пенсию не оч зашел?

вы и я, у нас одинаковый id. Меня завтра в армию забирают, но ищут по ID. Найдут вместе меня вас, ID то у нас одинаковые

и поедете вы в Североморск

да и вообще я читал гугл рекомендует его вообще не использовать

Так как сделать анимацию по наведению мыши на блок?

норм?

Меня это сейчас интересует

если не ошибаюсь это про id было

идите в жопу)