Question

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

$("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。

请帮我解决这个问题。我无法搞清楚。怎么做？

Answer 1

正如其他答案所示，您可以使用CSS执行此操作。

但是由于边界，接近DOM元素的位置会发生什么不安。所以，我在想的是创建一个透明的DIV 围绕那个元素。并在鼠标上。删除它。

在这种情况下，听起来应该是using outline而不是border。

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

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

轮廓在元素“上方”绘制，因此其他元素的位置不会受到干扰。

Answer 2

这不是JavaScript / jQuery问题！改用CSS！

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

为了消除扰乱相邻元素的影响，请在正常状态下使用透明边框。

div {
    border: 1px solid transparent;
}

Answer 3

只需使用CSS，例如：

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

演示：http://jsfiddle.net/KQzRh/

<强>更新

请注意，@thirtydot's answer将是首选方式，但IE7不支持它（IE6支持我认为）。然后再说一遍：是否要支持IE7取决于你。

在这种情况下你会这样做：

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

Answer 4

你需要有一个白色/透明边框等于悬停时出现的边框宽度。

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

Answer 5

如果你真的想使用JS / jQuery，你应该将mouseover（即悬停）处理程序绑定到div而不是body（为您节省痛苦的上下文设置）。像：

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

请参阅 this fiddle 。

但话说回来，这也可以在普通的CSS中完成（这更好更简单）：

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

参见 another fiddle

如果使用border会让您的布局变得浑浊（边框会增加元素的尺寸），您可以使用outline代替（从@ thirtydot的回答中无耻地窃取）。

Answer 6

这个很简单，你只能用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>

Answer 7

我认为这里应该提及box-sizing: border-radius，即使这是一个相当古老的问题。

如果您添加了使用的CSS并将box-sizing: border-box应用于元素，则附近的DOM元素位置会受到干扰而不会受到干扰。为什么？因为box-sizing: border-box包含边框和填充作为宽度的一部分。

＆＃13;

section {  overflow: hidden;  }
div {width: 33.333%; float: left;}

.b-r div {
  box-sizing: border-box;
}

div:hover {
  border: 10px blue solid;
}

＆＃13;

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

＆＃13;

您也可以在示例中使用box-sizing: border-radius并修复所有内容！

＆＃13;

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

＆＃13;

section {
  overflow: hidden; /* Prevent Clearfix */
}

div {
  width: 33.333%;
  float: left;
}

.b-r div {
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

如何在鼠标悬停时创建div元素周围的边框

7 个答案: