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

Question

我想在一个元素周围创建一个边框，只要鼠标悬停在它上面。 我正在尝试使用:

$("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。

请帮助我解决这个问题。我无法弄清楚。如何做到这一点？

Answer 1

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

But what happens, due to border , nearing DOM elements position gets disturbed . So , What I am thinking is to create a transparent DIV around that element . and on mouse out. remove that .

在那种情况下，听起来你应该是 using outline而不是 border。

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

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

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