I want to make something like Inspect Element highlight. I want to add a border to divs on mouseover.

I don't want this to change the width of the div and also, there are some divs with their own border, so I don't want to replace the div's default border.

```
 $( 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;
                }
            );

```

That's what I tried. But it is replacing the div's default border (if it has) and it changes the width of the div... and it also border the parent divs too...

**EDIT**

I also tried to add a class to mouseovered div and use `:before` to add the background with position absolute, but it goes wrong if website uses positions relative and absolute:

```
            $(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;
                }
            );

```

And CSS:

```
.highlight {
}

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

```

What can I do? Thanks!