鼠标悬停时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 1}}和border。

---

DEMO - 使用border-box

---

Answer 2

在CSS中，为元素定义一个6px边框，并在悬停时只更改元素的边框颜色，在这种情况下，它看起来就像是在悬停时应用边框。

.myClass{
    border: 6px solid [colorOftheBackground]; 
}

另一方面，你可以在没有jQuery的情况下这样做。

.myClass{
    border: 6px solid [colorOftheBackground]; 
}

.myClass:hover{
    border-color: green; 
}

Answer 3

另一种方法是使用透明边框，你可以不用javascript来做，只需要CSS：

.myClass { border-left: 6px solid transparent; }
.myClass:hover { border-left: 6px solid green; }

UPD：here就是一个例子

Answer 4

之所以发生这种情况，是因为您的默认元素没有边框。用你的背景颜色在你的CSS中放置边框。

像这样的jQuery

$('.myClass').css( {borderLeft: '6px solid default-color'});

或者在css

    .myClass{
       border: 6px solid [colorOftheBackground]; 
     }

Answer 5

直接在css中添加margin-left。

.myClass { margin-left: 6px; }

然后在jQuery中删除它。

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

您可以在jdfiddle上查看。