如何在鼠标悬停时在 div 元素周围创建边框

我想在鼠标悬停在元素上方时在元素周围创建边框。 我正在尝试使用：

$("body").mouseover(function(e){
    var element =  document.elementFromPoint(e.clientX,e.clientY);
    var target = $(e.target);
    if (target.is("div")) {
        element.style.border = "1px solid blue";
        currentElt = target;
    }
    element.onmouseout = function(){
        this.style.border = "0px";
    }
});

但发生了什么，由于边界附近的 DOM 元素位置受到干扰。 所以，我的想法是在该元素周围创建一个透明的 DIV，然后在鼠标移出时删除该透明的 div。

请帮助我实现这个想法。我无法弄清楚。这个怎么做 ？

正如其他答案所建议的，您可以使用 CSS 来做到这一点。

但是会发生什么，由于 border ，靠近 DOM 元素的位置变得 不安 。所以，我的想法是创建一个透明的DIV 围绕该元素。并在鼠标移出时。删除那个。

在这种情况下，听起来你应该using outline https://developer.mozilla.org/en/CSS/outline代替border.

div:hover {
    outline: 1px solid blue;
}

http://jsfiddle.net/thirtydot/Xuddz/ http://jsfiddle.net/thirtydot/Xuddz/

轮廓绘制在元素的“上方”，因此不会干扰其他元素的位置。