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.