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

Question

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

我试图在鼠标悬停在 div 上时向 div 元素添加边框，但我发现添加边框后，边框会占用一些空间并使内容移动。请参阅下面的片段。这种情况下是否可以在显示边框时避免移动内容？

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

Run Code Online (Sandbox Code Playgroud)

>

Answer 1

jax*_*axb 6

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

归档时间：	15 年，3 月前
查看次数：	2135 次
最近记录：	15 年，3 月前