Javascript JS-将活动类添加到与悬停元素具有相同数据属性的元素中

我希望达到与“人人有份”一节类似的效果。将鼠标悬停在任何“link”元素上后，具有相同“dataproduct”值的“product”元素应获得“active”类。我需要在纯JS中实现它（没有jQuery）。我做了几次尝试，但都没有成功。你知道有什么例子可以帮助我吗

<div class="product-links">
    <a class="link" data-product="1" href="/url/"></a>
    <a class="link" data-product="2" href="/url/"></a>
    <a class="link" data-product="3" href="/url/"></a>
    <a class="link" data-product="4" href="/url/"></a>
</div>

<div class="screenshot-container">
    <div class="product" data-product="1"><img src="image.jgp"></div>
    <div class="product" data-product="2"><img src="image.jgp"></div>
    <div class="product" data-product="3"><img src="image.jgp"></div>
    <div class="product" data-product="4"><img src="image.jgp"></div>
</div>

---

这里有一种可能的方法，它使用

鼠标悬停

事件和一些冒泡事件将

活动

类添加到当前悬停的链接上

constlinkcontainer=document.querySelector（“.productlinks”）；
linkContainer.addEventListener（“鼠标悬停”，函数（e）{
如果（e.target.className！=“link”）返回；
const productId=e.target.dataset.product；
选择Active（产品ID）；
});
linkContainer.addEventListener（“mouseout”，函数（e）{
如果（e.target.className！=“link”）返回；
选择活动（）；
});
功能选择活动（productId）{
const allProducts=document.querySelectorAll（“.product”）；
对于（所有产品中的产品）{
if（product.dataset.product==productId）{
product.classList.add（“活动”）；
}否则{
product.classList.remove（“活动”）；
}
}
}

.active{
背景色：#FF0；
}

1.
2.
3.
4.

e.target.getAttribute（“数据产品”）

可以简化为

e.target.dataset.product

。也可以考虑使用<代码>产品.CopyList.Twitter（“活动”，E.Talk.DeaseDeal.产品= =产品）代码，而不是<代码> I/EX/<代码> <代码> >选择Actudio。