使用jquery添加div边框而不更改宽度和默认边框

Question

我想做一些像Inspect Element高亮的东西.我想在鼠标悬停时为div添加边框.

我不希望这改变div的宽度,而且,有一些div有自己的边框,所以我不想替换div的默认边框.

 $( document ).find('div').hover(
                function(e){
                    $(this).css('border', '1px dashed #59A3D5');
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                },function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).css('border', 'none');
                    return false;
                }
            );

这就是我的尝试.但是它正在替换div的默认边框(如果有)并且它改变了div的宽度......并且它也与父div相邻...

编辑

我还尝试将一个类添加到mouseovered div并用于:before添加绝对位置的背景,但如果网站使用相对和绝对位置则会出错:

            $(document).find('div').hover(
                function(e){
                    $(document).find('div').removeClass("highlight");
                    var current_div_position = $(this).position();
                    $(document).find('body').append('<style>.highlight:before { width: '+$(this).outerWidth(true)+'; height: '+$(this).outerHeight(true)+'; top: '+current_div_position.top+'; left: '+current_div_position.left+';}</style>');
                    e.stopPropagation();
                    $(this).addClass("highlight");
                    e.preventDefault();
                    return false;
                },function(e){
                    $(this).removeClass("highlight");
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
            );

和CSS:

.highlight {
}


.highlight:before {
    position: absolute;
    content: '';
    background: rgba(183, 226, 243, 0.4);
    pointer-events: none;
    z-index: 99999;
}

我能做什么？谢谢!

Answer 1

outline改为添加.它不会改变尺寸,并且会在不干扰边框的情况下进行渲染.

.highlight {
    outline: 2px dashed #0f0;
}

例如:http://jsfiddle.net/fzhvf4v1

编辑:作为替代方案,您还可以使用box-shadow突出显示的元素"发光":http://jsfiddle.net/fzhvf4v1/1/