7

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

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

请帮我解决这个想法。我无法弄清楚。这该怎么做 ？

4

7 回答 7

30

正如其他答案所建议的那样，您可以使用 CSS 来做到这一点。

但是会发生什么，由于边框，接近 DOM 元素的位置会受到干扰。所以，我在想的是围绕该元素创建一个透明的 DIV。和鼠标。删除那个。

在这种情况下，听起来您应该使用outline而不是border.

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

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

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

于 2012-04-13T09:16:34.950 回答
5

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

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

为了消除干扰相邻元素的效果，在正常状态下在其周围使用透明边框。

div {
    border: 1px solid transparent;
}
于 2012-04-13T09:13:47.670 回答
4

只需为此使用 CSS，例如：

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

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

更新

请注意，@thirtydot 的回答将是首选方式，但 IE7 不支持它（我认为 IE6 不支持）。再说一遍：是否支持 IE7 取决于您。

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

div:hover { outline: 1px solid green; }
于 2012-04-13T09:14:01.517 回答
3

您需要有一个白色/透明边框，该边框等于将出现在悬停时的边框宽度。

.element { border: 1px solid transparent; }
.element:hover { border: 1px solid #000; }
于 2012-04-13T09:16:47.557 回答
1

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

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

看到这个小提琴。

但话又说回来，这也可以用纯 CSS 来完成（更好更简单）：

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

看另一个小提琴

如果使用border使您的布局跳跃（因为边框会增加元素的尺寸），您可以outline改用（从@thirtydot 的答案中无耻地窃取）。

于 2012-04-13T09:18:13.923 回答
1

这个很简单，只用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>
于 2012-04-13T09:26:20.417 回答
0

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

如果您添加了使用过的 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>

您也可以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>

于 2017-04-26T22:46:51.463 回答