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 ?
7 answers
solution1
29 ACCPTED 2012-04-13 09:16:34
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.
solution2
5 2012-04-13 09:13:47
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;
}
solution3
4 2012-04-13 09:14:01
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; }
solution4
3 2012-04-13 09:16:47
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; }
solution5
1 2012-04-13 09:18:13
If you really want to use JS / jQuery you should bind the mouseover (ie 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).
solution6
1 2012-04-13 09:26:20
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>
solution7
0 2017-04-26 22:46:51
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;} .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 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; } .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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.