CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sachin Jain
Sachin Jain

Reputation: 21842

How to create border around div element on mouseover

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 ?

Upvotes: 8

Views: 32361

Answers (7)

Chris Happy
Chris Happy

Reputation: 7295

I think box-sizing: border-radius should be mentioned here, even if it's a fairly old question.

If you added used CSS and applied box-sizing: border-box to the element, nearby DOM elements position gets disturbed won't get disturbed. Why? Because box-sizing: border-box includes the border and the padding as part of the width.

section {  overflow: hidden;  }
div {width: 33.333%; float: left;}

.b-r div {
  box-sizing: border-box;
}

div:hover {
  border: 10px blue solid;
}
<section class="b-r">
  <strong>These divs have border-radius.</strong><br>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
</section>

<section class="nob-r">
  <strong>These divs do not have border-radius.</strong><br>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
  <div>Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.</div>
</section>

You could also just use box-sizing: border-radius in your example and everything's fixed!

$("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";
  }
});
section {
  overflow: hidden; /* Prevent Clearfix */
}

div {
  width: 33.333%;
  float: left;
}

.b-r div {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="b-r">
  <strong>These divs have border-radius.</strong><br>
  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>

  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>

  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>
</section>

<section class="nob-r">
  <strong>These divs do not have border-radius.</strong><br>
  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>

  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>

  <div>
    Some Text, and more text, and more text, and even more text. Some Text, and more text, and more text, and even more text.
  </div>
</section>

Upvotes: 0

srini
srini

Reputation: 884

This one is simple matter, you can do with css only. Try this one 

<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>
    <title>Horton Computer Solutions Home</title>
  </head>

  <style type="text/css">
    .some_class:hover{
      color: orange;
      border:2px solid #3300FF;
     }
  </style>
<body>
  <div class="some_class" style="width:290px;"> some text here <br/></div>
 </body>
</html>

Upvotes: 1

m90
m90

Reputation: 11812

If you really want to use JS / jQuery you should bind the mouseover (i.e. hover) handler to the divs instead of the body (saving you the painful context setting). Like:

$('div').hover(function(){
   $(this).css('border','1px solid blue');
},function(){
   $(this).css('border','1px solid transparent');
});

See this fiddle.

But then again, this could be done in plain CSS as well (which is much better and simpler):

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

See another fiddle

If the use of border makes your layout jumpy (as border will add to your element's dimensions) you can use outline instead (shamelessly stolen from @thirtydot's answer).

Upvotes: 1

PeeHaa
PeeHaa

Reputation: 72642

Simply use CSS for this, example:

div { background: red; border: 1px solid transparent; }
div:hover { border: 1px solid green; }

Demo: http://jsfiddle.net/KQzRh/

UPDATE

Note that @thirtydot's answer would be the prefered way, but IE7 doesn't support it (IE6 support niether I think). Then again: it's up to you whether you want to support IE7.

In that case you would do:

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

Upvotes: 4

Robin Maben
Robin Maben

Reputation: 23034

You need to have a white/transparent border equal to width of the border that's going to appear on hover.

.element { border: 1px solid transparent; }
.element:hover { border: 1px solid #000; }

Upvotes: 3

thirtydot
thirtydot

Reputation: 228142

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.

Upvotes: 30

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174937

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;
}

Upvotes: 5

Related Questions