Javascript 鼠标左键移动元素上方的Jquery css边框

我对jquery的css函数有一个问题

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

              });

当它工作时，左边的边框出现在元素上。问题在于元件移动（向左移动6px）

我试过：

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

              });

元素仍在移动，我也尝试：

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

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

              });

同样的问题

如何在不移动任何内容的情况下在元素上生成左边的边框

---

感谢

边框通常会添加到元素的维度，因此它会将元素推向更右侧。 您应该添加

框大小：边框框

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

这将起作用的原因是，根据，将

框大小

设置为

边框框

会导致

宽度

和

高度

属性包括

填充

和

边框

---

-使用

边框框

---

---

在CSS中，为元素定义一个6px的边框，悬停时只需更改元素的边框颜色，在本例中，看起来就像在悬停时应用边框一样

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

另一方面，您可以在没有jQuery的情况下执行此操作

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

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

---

另一种方法是使用透明边框，无需javascript，只需CSS即可：

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

---

UPD:就是一个例子，它之所以发生是因为默认元素没有边框。在css中使用该背景色添加边框

像这样在jQuery中

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

或者在css中

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

---

直接在css中添加左边距

.myClass { margin-left: 6px; }

然后在jQuery中删除它

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

---

您可以查看它。

考虑使用

addClass

并对css文件进行所有更改，而不是使用jQuery

css

方法内联添加它们。它更干净，将来更容易覆盖或删除它们，而不是使用重要或出错的js代码。@任何人\u ph:它在IE7或更低版本中都不起作用。可能还需要浏览器前缀，即：

-webkit

，

-moz

，等等。。。在Chrome中无前缀工作。看看这对你是否有用你的演示在Firefox 24.7.0上不起作用，但我用Google chrome做了一次尝试，事实上，它在这个浏览器上没有问题。