Javascript 如何在鼠标上方的div元素周围创建边框_Javascript_Jquery_Html_Css

Javascript 如何在鼠标上方的div元素周围创建边框

javascript jquery html css

Javascript 如何在鼠标上方的div元素周围创建边框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在一个元素周围创建一个边框，只要鼠标在它上面。我正在尝试使用： $("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";

我想在一个元素周围创建一个边框，只要鼠标在它上面。我正在尝试使用：

$("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";
    }
});

但是发生了什么，由于DOM元素附近的边界位置受到干扰。所以，我的想法是围绕该元素创建一个透明DIV，然后在鼠标悬停时删除该透明DIV

请帮我想出这个主意。我搞不懂。如何做到这一点？
这不是JavaScript/jQuery的问题！改用CSS

div:hover { border: 1px solid blue; }
为了消除干扰相邻元素的影响，请在正常状态下在其周围使用透明边框

div { border: 1px solid transparent; }

只需使用CSS即可，例如：

div { background: red; border: 1px solid transparent; } div:hover { border: 1px solid green; }
演示：
更新
请注意，这是首选的方式，但IE7不支持它（我认为IE6支持niether）。再说一遍：是否支持IE7取决于您
在这种情况下，您将执行以下操作：

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

正如其他答案所建议的，您可以使用CSS来实现这一点
但是，由于边界的原因，靠近DOM元素的位置会发生什么呢不安的所以，我想的是创建一个透明的DIV 围绕着那个元素。等老鼠出来。去掉那个
在这种情况下，听起来应该是而不是
border

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

轮廓是在元素的“上方”绘制的，因此不会干扰其他元素的位置。
您需要有一个白色/透明边框，该边框的宽度等于悬停时显示的边框的宽度。

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

如果您真的想使用JS/jQuery，您应该将
mouseover
（即悬停）处理程序绑定到div而不是body（省去了痛苦的上下文设置）。比如：
请参见
但是，同样，这也可以在纯CSS中完成（这更好更简单）：
请参见

如果使用
边框
使布局变得不稳定（因为边框会增加元素的尺寸），您可以使用
轮廓
（不知羞耻地从@thirtydot的答案中盗取）。
这件事很简单，您只能使用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>

霍顿计算机解决方案之家 .某类：悬停{ 颜色：橙色；边框：2个实心#3300FF； } 这里有一些文本
我认为应该在这里提及，即使这是一个相当古老的问题
如果添加了使用过的CSS并将
框大小：边框框
应用于元素，则附近的DOM元素位置不会受到干扰。为什么？因为
框大小：边框框
包括边框和填充作为宽度的一部分

节{溢出：隐藏；} div{width:33.333%；float:left；} b-r分区{ 框大小：边框框； } div:悬停{ 边框：10px蓝色固体； }

这些div具有边界半径。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。这些div没有边界半径。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。一些文字，更多文字，更多文字，甚至更多文字。
为什么不使用纯CSS？像
div:hover{border:1px solid blue}
应该做你想做的事情。这是一个选项。另一个选项是设置边距或填充，以便考虑边框的空间。移动元素的唯一原因是边框增加了元素的宽度（很好），如果在添加边框时将元素的宽度减少像素宽度*2，应该可以。@m90:真遗憾，（我现在只看到你的评论）。如果你把它作为答案贴出来，你就可以得到所有的荣誉。不要将答案作为评论发布@事实上，从技术上讲，这并不是问题的答案：P不要紧。实际上在你指定的链接中，你已经设置了背景颜色的边框，所以它最初不可见，但当鼠标悬停在上面时，它只是改变颜色。还是谢谢你告诉我一些我不知道的事情know@blunderboy这是一种跨浏览器的方法，可以防止在突然出现边界时跳过div。我建议您最好使用@thirtydot的
outline
解决方案。它在不同的元素之间更为一致，例如表单元素、div等@ManseUK：我最终使用了
border
方法，至今仍然如此。因此，我同意这个答案。
div:hover{ border: 1px solid blue; }

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