css - div position apply to another div 错误

Question

我在 jsfiddle 中有这个例子，第一个例子很好用，第二个例子不能正常工作，问题是，当我将鼠标悬停在另一个 div 上时，按钮位置适用于第一个 div，而不是第二个。

http://jsfiddle.net/GepCL/1/

<div class="wrapper" onmouseover="document.getElementById('button').style.display = 'inline';" onmouseout="document.getElementById('button').style.display = 'none';">

 <img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img>

<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>



<div id="button" class="button" style="display: none;">Add to basket</div>

新的 添加到购物篮

Answer 1

http://jsfiddle.net/GepCL/18/

'

 <img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>

<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>



<div id="button" class="button" style="display: none;">Add to basket</div>

 <img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>

<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button2" class="button2" style="display: none;">Add to basket</div>

'

你应该为“添加到购物车”按钮设置不同的 id