How to create border around div element on mouseover

css, html, javascript, jquery

Solution

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.

Problem

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 ?

Original source