javascript - Jquery css borderLeft 在鼠标悬停时移动元素

Question

我对 jquery 的函数 css 有疑问。

$('.myClass').mouseover(function() {
                  $(this).css( {borderLeft: '6px solid green'});

              });

成功了，borderLeft 出现在元素上。问题是元素移动(向左 6px)

我试过了:

$('.myClass').mouseover(function() {
                  $(this).css( {borderLeft: '6px solid green', margin: '-6px' });

              });

元素还在动，我也试过了:

$('.myClass').mouseover(function() {

                  $(this).css( {borderLeft: '6px solid green', marginLeft: '-6px' });

              });

同样的问题。

如何在不移动任何东西的情况下在我的元素上生成 borderLeft？

谢谢

Answer 1

边框通常会增加元素的尺寸，因此它会将您的元素推向右侧。您应该添加 box-sizing: border-box 。

.myClass{
    box-sizing: border-box; 
}

这会起作用的原因是，根据 box-sizing MDN documentation ，将 box-sizing 设置为 border-box 会导致 width 和 height 属性包含 padding 和 边框。

---

DEMO - 使用 边框框

---