0

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

新加入购物车
4

3 回答 3

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

于 2013-06-19T08:47:31.493 回答
0

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

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

于 2013-06-19T08:44:45.577 回答
0

您可以使用下一个脚本使其更加自动化并消除 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/

于 2013-06-19T09:04:29.110 回答