How to create border around div element on mouseover

Question

I want to create a border around an element , as soon as , mouse is over it . I am trying to use:

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

But what happens, due to border nearby 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 transparent div.

Please help me with this idea. I am not able to figure out. How to do this ?

Answer 1

As the other answers suggest, you can do this using 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 .

In that case, it sounds like you should be using outline instead of border.

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

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

Outlines are drawn "above" the element, so no other elements' positions will be disturbed.

Answer 2

This isn't a JavaScript/jQuery problem! Use CSS instead!

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

In order to nullify the effect of disturbing the neighboring elements, Use a transparent border around it in the normal state.

div {
    border: 1px solid transparent;
}