Javascript 在不改变 div 高度和宽度的情况下将图像添加到 div？

Question

   <div id="storage-bin-title">
    <div id="storage-bin">
        <div style="z-index:1; width:200px; background-color:black;" id="abc">
            <img src="http://2aek.com/inventory/test/1.png" />
            <img src="http://2aek.com/inventory/test/edit-button.png" id="edit" style="display:none" />
            <img src="http://2aek.com/inventory/test/delete-button.png" id="add" style="display:none;" />
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#abc").mouseover(function () {
        $("#edit").css({ display: 'inline', position:'relative', left:15, top:-55  });
        $("#add").css({ display: 'inline', position:'relative', left:15, top:-55  });

    });


    $("#abc").mouseout(function () {
        $("#edit").css({ display: 'none'});
        $("#add").css({ display: 'none' });
    });
});
</script>

演示地址:http://jsfiddle.net/zac1987/nru11uuo/2/

问题:当鼠标悬停在 div 上时，javascript 会在 div 中添加另外 2 个图像，因此 div 的宽度和高度都会增加。如何用css使javascript添加两张图片时div的宽高保持不变？

Answer 1

不要将 Javascript 用于 CSS 功能。 CSS 解决方案在这里会更好。您需要相对于父容器绝对定位编辑/添加按钮，只需调整底部和左侧位置即可。

#abc {position: relative;}
#abc .btn {
    display: none;
    position: absolute;
    bottom: 10px;
}
#abc #add {left: 30px;}
#abc:hover .btn {
    display: inline-block;
}

<div id="storage-bin-title">
    <div id="storage-bin">
        <div style="z-index:1; width:200px; background-color:black;" id="abc">
            <img src="http://2aek.com/inventory/test/1.png" />
            <img src="http://2aek.com/inventory/test/edit-button.png" class="btn" id="edit" />
            <img src="http://2aek.com/inventory/test/delete-button.png" class="btn" id="add" />
        </div>
    </div>
</div>