Css div位置应用于另一个div错误

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

新的
加入篮子

新的

---

添加到篮子问题是由您使用的ID引起的

由于两个按钮具有相同的ID，JavaScript将一直运行，直到找到匹配的ID为止。将鼠标悬停在第二个div上时，按钮将显示在第一个div上，因为一旦JavaScript找到ID，它就会停止查找，因为ID应该是唯一的。

"

新的
加入篮子

新的
加入篮子

"

---

您应该为按钮“添加到篮子”添加不同的id

您可以使用下一个脚本使其更加自动化，并消除id问题：

Javascript:

function fadeOut(div) {
   // Remove your DIV with the message Add to basket
   var olddiv = document.getElementById('button');
   div.removeChild(olddiv);
}

function fadeIn(div) {
   // Create a new DIV with your message Add to basket
   var newdiv = document.createElement('div');
   newdiv.setAttribute('class','button');
   newdiv.setAttribute('id','button');
   newdiv.innerHTML = 'Add to basket';
   div.appendChild(newdiv);

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

}

HTML:

function fadeOut(div) {
   // Remove your DIV with the message Add to basket
   var olddiv = document.getElementById('button');
   div.removeChild(olddiv);
}

function fadeIn(div) {
   // Create a new DIV with your message Add to basket
   var newdiv = document.createElement('div');
   newdiv.setAttribute('class','button');
   newdiv.setAttribute('id','button');
   newdiv.innerHTML = 'Add to basket';
   div.appendChild(newdiv);

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

}

功能fadeIn（div）{
if（$（'#按钮'，$（div））.html（）==未定义）{
$newdiv=$（''）
.attr（{id:'button'}）
.addClass（“按钮”）
.hide（）；
$newdiv.text（'Add to basket'）；
$（div）.追加（$newdiv）；
}
$（'#按钮'，$（div））.show（）；
}

---

示例：

谢谢！，我没看到，我把我的帖子改了。

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
    <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>

function fadeOut(div) {
$('#button', $(div)).hide();

function fadeIn(div) {
    if ($('#button', $(div)).html() == undefined) {
        $newdiv = $('<div></div>')
            .attr({ id : 'button' })
            .addClass("button")
            .hide();
        $newdiv.text('Add to basket');
        $(div).append($newdiv);
    }
    $('#button', $(div)).show();
}