Изменение css стиля элемента при наведении на другой элемент с помощью JS

#javascript

Здравствуйте! Никак не получается решить проблему, знания JS очень скудные. Нужно
заставить квадраты двигаться при наведении на текст над ним.
Как заставить этот скрипт работать для всех элементов с одинаковым классом? Я пробовал
через querySelectorAll, но максимум чего удалось добиться - это одновременное движение
всех квадратов вниз, без обратного движения. Нужно, чтобы каждый работал по отдельности.
CSS не подойдёт, в оригинале блоки расположены далеко друг от друга.
Помогите пожалуйста, я уже всю голову себе сломал :(



var dms = document.querySelector('.dm-short-news');
var dmi = document.querySelector('.dm-intro-news');

dms.onmouseover = function(e) {
  dmi.style.transform = 'translateY(50px)';
};

dms.onmouseout = function(e) {
  dmi.style.transform = '';
};
.dm-intro-news {
  width: 200px;
  height: 200px;
  background: #333333;
  transition: 0.5s;
}
.wr {display: inline-block}

Текст



Текст



Текст





    

Ответы

Ответ 1

При этой верстке можно и без JS обойтись



.dm-intro-news {
  width: 200px;
  height: 200px;
  background: #333333;
  transition: 0.5s;
}
.wr {display: inline-block;transition:2s}
.dm-short-news{display:inline-block}
.dm-short-news:hover~.dm-intro-news{margin-top:20px}

  
Текст
  



  
Текст
  



  
Текст
  




Ответ 2

Получилось решить проблему собственными силами. 



NodeList.prototype.forEach = Array.prototype.forEach;

var dmns = document.querySelectorAll('.wr');
dmns.forEach(function(dmn) {
  dmn.querySelector('.dm-short-news').addEventListener('mouseenter', function() {
    dmn.querySelector('.dm-intro-news').style['transform'] = 'translateY(50px)';
  })
  dmn.querySelector('.dm-short-news').addEventListener('mouseout', function() {
    dmn.querySelector('.dm-intro-news').style['transform'] = 'translateY(0px)';
  })
});
.dm-intro-news {
  width: 200px;
  height: 200px;
  background: #333333;
  transition: 0.5s;
}

.wr {
  display: inline-block
}

  
Текст
  



  
Текст
  



  
Текст