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/

Answer 2

首先，元素不能同时定义2个border style properties 。按照你的方式行事，一个边界将永远取代另一个。

你可以选择其他方法。我建议，就像@pawel已经提到的那样，使用outline。如果必须使用边框，则可以使用另一个元素wrapping作为元素，并在悬停时将边框添加到此包装器。你可以安排它，这样这个包装器就不可见了。

而且，作为旁注，由于你想拥有的只是元素悬停的样式更改，你可以和应该使用css来实现它。查看css :hover。

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

2 个答案: