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>

Demo at : http://jsfiddle.net/zac1987/nru11uuo/2/

Problem : When mouseover the div, javascript will add another 2 image into the div, so the div width and heigh expended. How to use css to make the div width and heigh remain the same when the two images are added into it by javascript?

Answer 1

Don't use Javascript for CSS functionality. CSS solution would be better here. You need to position edit/add buttons absolutely relatively to parent container, just adjust bottom and left positions.

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

Answer 2

If the <div> has the CSS property overflow:hidden; , adding an image shouldn't change the size of the div.