Как передать название и изображение из одного элемента в другой с использованием data-атрибутов?
Есть вот такая конструкция (https://jsfiddle.net/jw5e94hy/1/). Мне нужно, чтобы при наведение на элемент навигации, его атрибуты передавались в другой блок. Я пришел пока только к такой конструкции и не понимаю, что делать дальше.
Разъясню немного конкретнее: есть ссылка «nav-link» в которой имеются атрибуты «category и img». При наведение, их нужно передать в блок «preview». Атрибут category в preview-head, атрибут img в preview-img, соответственно. Буду благодарен за помощь!
var category = $('.nav-link').data('category');
var image = $('.nav-link').data('img');
$('.nav-link').on('hover',function(){
})a{display:block;color:#222;margin-bottom:5px;text-decoration:none}
a:hover{text-decoration:underline}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul class="nav-list">
<li><a class="nav-link" href="#" data-category="Категория 1" data-img="#1">Категория 1</a></li>
<li><a class="nav-link" href="#" data-category="Категория 2" data-img="#2">Категория 2</a></li>
<li><a class="nav-link" href="#" data-category="Категория 3" data-img="#3">Категория 3</a></li>
</ul>
<ul class="nav-list">
<li><a class="nav-link" href="#" data-category="Категория 1" data-img="#4">Категория 4</a></li>
<li><a class="nav-link" href="#" data-category="Категория 2" data-img="#5">Категория 5</a></li>
<li><a class="nav-link" href="#" data-category="Категория 3" data-img="#6">Категория 6</a></li>
</ul>
<div class="preview">
<img class="preview-img" src="/img/home/nav/nav-1.jpg">
<p class="preview-head">Категория 1</p>
</div>
</div>