javascript - 鼠标悬停时显示 'Add to Cart' 不适用于类似的 elementId

Question

我有以下代码用于显示 Add to Cart onmouseover .如果只有 1 个类似 ID 的项目，它会完美地工作，但在某些情况下，可以有相同的 product在同一个页面显示多次，并且有Add to Cart按钮不显示给当前对象，而是显示给第一个 element那个特别的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>

如何设置 display:block至 respective object每当用户拿走他/她的 mouse

谢谢

Answer 1

首先，您复制 ID 是行不通的。但是下面的代码将起作用。 Finlay 为什么不用 Jquery 很简单

onmouseover="this.children[0].style.display='block'"onmouseout="this.children[0].style.display='none'"