Question

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

<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

Answer 2

问题是由您使用的ID引起的。

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

Answer 3

您可以使用下一个脚本使其更自动并删除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);

}

<强> HTML：

<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>

示例： http://jsfiddle.net/GepCL/36/

编辑：在按钮闪烁之前的代码中。使用下一个脚本，它是固定的。我已经使用Jquery来简化它。

问题是每次修改DOm时添加和删除都会触发onmouseout事件。

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(); }

示例：http://jsfiddle.net/GepCL/57/

div位置适用于另一个div错误

3 个答案: