Здравствуйте! Никак не получается решить проблему, знания 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}
Ответ
Получилось решить проблему собственными силами.
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
}
Комментариев нет:
Отправить комментарий