Question

当moust悬停在div上时，我试图为div元素添加一个边框，但是我发现在边框之后，boder将占用一些空间并使内容移动。请参阅下面的代码段。在显示边框时是否可以避免移动内容？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <style type="text/css">
                </style>
                <script type="text/javascript" src="js/jquery.min.js"></script>         
                <script type="text/javascript" src="js/lib.js"></script>
                <script type="text/javascript">
                        $(document).ready(function() {
                                                $('#test-id').hover(function() {
                                                        console.log("test-id");
                                                        $('#test-id').css('border', '5px dotted');
                                                        }, 
                                                        function() {
                                                        $('#test-id').css('border', 'none');
                                                        }
                                                        );
                                                });

                </script>
        </head>
        <body style="margin-bottom:0px;margin-top:0px;">
                <div>
                        <div style="width: 300px;">    
                        </div>
                        <div id="test-id">             
                                jfdjkfjdsfjaldsjfsjf           
                        </div>
                </div>
        </body>
</html

＆GT;

Answer 1

尝试始终保持边框，只需将颜色从transparent更改为您想要的颜色即可。您也可以使用背景颜色作为“关闭”颜色，但这意味着它必须过度使用纯色元素。

Answer 2

使用CSS' outline'属性而不是border。哪个不会占用元素空间。希望能帮到你。

Answer 3

宾，

是边框也是宽度的一部分。因此，有一件事在itselef之前给出一个与背景颜色相同的边框，一旦你鼠标悬停你可以改变颜色，这样它就不会推动其他颜色。

Answer 4

这是css渲染的行为。

您需要设置边距以防止这种情况发生。

$('#test-id').css('margin', '-5px');

Answer 5

1解决方法是你使用on：on hover -2px或另一个处于正常状态，边框颜色设置为方框颜色（或主体的背景颜色）。

前1：

<body>
<div class="container"></div>
</body>

body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }

前2 :(最佳解决方案）

<body>
<div class="container"></div>
</body>

body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }

如何添加边框但不更改内容位置

5 个答案: