将鼠标悬停在 div 上，使用其 data-attribute 更改 img 的 src

我想将鼠标悬停在 div 上并使用其独特的数据属性来更改页面上其他位置的 img 的 src。因此，您浏览列表，并且 url 会根据它悬停在哪个 div 上而发生变化。到目前为止，我的方法是将鼠标悬停事件附加到我的所有列表元素并每次触发一个函数，该函数将获取当前悬停在元素上的数据属性。但它不起作用，我觉得我从错误的角度接近这个问题。我知道这很容易通过使用几行 jquery 来解决，但我不想使用它，因为我只需要它。有一种方法可以在普通的旧 javascript 中做到这一点，对吧？

const workThumb = document.querySelectorAll('#work-thumb');
const works = document.querySelectorAll('.work-list').forEach(item => {
  item.addEventListener('mouseover', event => {
    var src = this.getAttribute('data-thumb');
    workThumb.setAttribute("src", url);
  })
})

<a class="work-list" data-thumb="http://url.to/test.jpg">
<a class="work-list" data-thumb="http://url.to/test.jpg">
<a class="work-list" data-thumb="http://url.to/test.jpg">
[...]

<img id="work-thumb" src="test.jpg">