Страницы

Поиск по вопросам

пятница, 29 марта 2019 г.

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

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

Текст
Текст
Текст

Комментариев нет:

Отправить комментарий