Geek Answers Handbook

How to create a border around a div element on hover

I want to create a border around an element as soon as the 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 because of the border next to the elements of the DOM elements is violated . So, I want to create a transparent DIV around this element and pull the mouse out of this transparent div.

Please help me with this idea. I can not understand. How to do it?

+7
source share
7 answers

As other answers show, you can do this with CSS.

But what happens, from abroad, the position of the broken DOM elements is approaching. So, I think this is to create a transparent DIV around this element. and on the mouse. delete it.

In this case, you will use outline instead of border .

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

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

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

+29
source

This is not a JavaScript / jQuery problem! Use CSS instead!

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

To negate the effect of breaking neighboring elements, use the transparent frame around it in normal condition.

 div { border: 1px solid transparent; }
+5
source

Just use CSS for this, for example:

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

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

UPDATE

Please note that @thirtydot answer will be the preferred way, but IE7 does not support it (IE6 supports niether, I think). Again: it is up to you whether you want to support IE7.

In this case, you will do:

 div:hover { outline: 1px solid green; }
+4
source

You need to have a white / transparent border equal to the width of the border that will be displayed on hover.

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

If you really want to use JS / jQuery, you should bind a mouseover handler (e.g. hover) to the div, and not to the body (while preserving the painful context setting). How:

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

See this fiddle .

But again, this can be done in simple CSS (which is much better and simpler):

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

See another fiddle

If using border makes your layout unmanageable (as the border will add to your element size), you can use outline (shamelessly stolen from @thirtydot's answer) instead.

+1
source

This is a simple question you can only do with css. 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>
+1
source

I think box-sizing: border-radius here, even if it's a rather old question.

If you added the used CSS and applied box-sizing: border-box to the element, then the position of the DOM elements that will be violated will not be violated. What for? Since box-sizing: border-box includes the border and padding as part of the width.

 section { overflow: hidden; } div {width: 33.333%; float: left;} .br div { box-sizing: border-box; } div:hover { border: 10px blue solid; } 
 <section class="br"> <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 can also just use box-sizing: border-radius in your example, and everything is 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; } .br div { box-sizing: border-box; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="br"> <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>
0
source

More articles:


All Articles