Как передать название и изображение из одного элемента в другой с использованием data-атрибутов?

Question

[hello-world-1]

Есть вот такая конструкция (https://jsfiddle.net/jw5e94hy/1/). Мне нужно, чтобы при наведение на элемент навигации, его атрибуты передавались в другой блок. Я пришел пока только к такой конструкции и не понимаю, что делать дальше.

Разъясню немного конкретнее: есть ссылка «nav-link» в которой имеются атрибуты «category и img». При наведение, их нужно передать в блок «preview». Атрибут category в preview-head, атрибут img в preview-img, соответственно. Буду благодарен за помощь!

Answer 1

[0xD34F]

document.querySelector('.nav').addEventListener('mouseover', e => {
  const data = e.target.closest('.nav-link')?.dataset;
  if (data) {
    document.querySelector('.preview-img').src = data.img;
    document.querySelector('.preview-head').textContent = data.category;
  }
});

Comments

[hello-world-1]

Большое спасибо. Отличное решение!