Javascript 如何在鼠标悬停时围绕 div 元素创建边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10138118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create border around div element on mouseover
提问by sachinjain024
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.
但是会发生什么，由于边界附近的 DOM 元素位置受到干扰。所以，我在想的是围绕该元素创建一个透明的 DIV，然后在鼠标移开时删除该透明的 div。
Please help me with this idea. I am not able to figure out. How to do this ?
请帮我解决这个问题。我无法弄清楚。这该怎么做 ？
回答by thirtydot
As the other answers suggest, you can do this using CSS.
正如其他答案所建议的那样，您可以使用 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 .
但是会发生什么，由于 border ，接近 DOM 元素的位置会受到干扰。所以，我在想的是围绕该元素创建一个透明的 DIV。并在鼠标退出。删除那个。
In that case, it sounds like you should be using outlineinstead of border.
在这种情况下，听起来您应该使用outline而不是border.
div:hover {
outline: 1px solid blue;
}
http://jsfiddle.net/thirtydot/Xuddz/
http://jsfiddle.net/thirtydot/Xuddz/
Outlines are drawn "above" the element, so no other elements' positions will be disturbed.
轮廓绘制在元素“上方”，因此不会干扰其他元素的位置。
回答by Madara's Ghost
This isn't a JavaScript/jQuery problem! Use CSS instead!
这不是 JavaScript/jQuery 问题！改用 CSS！
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;
}
回答by PeeHaa
Simply use CSS for this, example:
只需为此使用 CSS，例如：
div { background: red; border: 1px solid transparent; }
div:hover { border: 1px solid green; }
Demo: http://jsfiddle.net/KQzRh/
演示：http: //jsfiddle.net/KQzRh/
UPDATE
更新
Note that @thirtydot's answerwould 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.
请注意，@thirtydot 的答案将是首选方式，但 IE7 不支持它（我认为 IE6 也不支持）。再说一遍：是否要支持 IE7 取决于您。
In that case you would do:
在这种情况下，你会这样做：
div:hover { outline: 1px solid green; }
回答by Robin Maben
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; }
回答by m90
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:
如果您真的想使用 JS / jQuery，您应该将mouseover（即悬停）处理程序绑定到 div 而不是主体（为您节省痛苦的上下文设置）。喜欢：
$('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):
但话又说回来，这也可以用普通的 CSS 来完成（这样更好更简单）：
div:hover{
border: 1px solid blue;
}
See another fiddle
If the use of bordermakes your layout jumpy (as border will add to your element's dimensions) you can use outlineinstead (shamelessly stolen from @thirtydot's answer).
如果使用border使您的布局变得跳跃（因为边框会增加元素的尺寸），您可以outline改用（从@thirtydot 的答案中无耻地窃取）。
回答by srini
This one is simple matter, you can do with css only. Try this one
这是一件很简单的事情，你只能用 css 来做。试试这个
<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>
回答by Chris Happy
I think box-sizing: border-radiusshould be mentioned here, even if it's a fairly old question.
我认为box-sizing: border-radius应该在这里提到，即使这是一个相当古老的问题。
If you added used CSS and applied box-sizing: border-boxto the element, nearby DOM elements position gets disturbed won't get disturbed. Why? Because box-sizing: border-boxincludes the border and the padding as part of the width.
如果您添加了使用过的 CSS 并应用于box-sizing: border-box元素，则附近的 DOM 元素位置不会受到干扰。为什么？因为box-sizing: border-box包括边框和填充作为宽度的一部分。
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-radiusin your example and everything's fixed!
您也可以box-sizing: border-radius在您的示例中使用，一切都已修复！
$("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>