Javascript 显示'；添加到购物车'；鼠标悬停不适用于类似的elementId

我有下面的代码用于在MouseOver上显示

添加到购物车

。如果只有一个类似ID的项目，它就可以正常工作，但在某些情况下，同一个
产品可以在同一页面中多次显示，并且
添加到购物车
按钮不会显示到当前对象，而是显示到该特定
ID
的第一个
元素

## Category A ##
<div onmouseover="document.getElementById('addtocart1').style.display='block'" onmouseout="document.getElementById('addtocart1').style.display='hidde'">

<span style="display:none;" id="addtocart1"></span>
          Product A
</div>

## Category B ##
<div onmouseover="document.getElementById('addtocart1').style.display='block'" onmouseout="document.getElementById('addtocart1').style.display='hidde'">

<span style="display:none;" id="addtocart1"></span>
       Product A
</div>

##A类##
产品A
##B类##
产品A

每当用户使用
鼠标时，如何将
显示：block
设置为相应的
对象

谢谢
正如在关于该问题的一条评论中所述，元素id必须是唯一的。如果希望所有对象都有共同点，请尝试为它们提供一个类，然后将返回一个包含该类的所有元素的数组。然后在该数组上循环并执行您需要执行的任何操作。您还需要将所有这些放在一个名为
onmouseover
和
onmouseout
的函数中，因为您将执行多行代码

或者，如果您要使用类似的东西，您可以使用CSS选择器获取类，然后，
$（'.className'）。
（函数）
和
$（'.className'）。
（函数）
，将该函数应用于具有该类的所有元素。
首先，复制ID的值将不起作用。但是下面的代码会起作用。Finlay为什么不使用Jquery呢？很简单

onmouseover=“this.children[0].style.display='block'”onmouseout=“this.children[0].style.display='none'”ID必须是唯一的。首先，页面上不应该有重复的ID，ID应该是唯一的。。。好啊我还将包括分类id:）Thanksdisplay:hidden不是有效的CSS。还有display:hidde；或显示：无；