Javascript 隐藏/显示边框时保持文本输入的固定位置

我希望我的输入文本字段在鼠标移到上面之前看起来像普通的旧文本

我用这一小段代码完成了这一点（也可以在这里找到）

美学上的问题是，当您悬停时，文本字段中的文本会在显示边框时被推到一两个像素上。想知道如何在悬停期间将文本保持在完全相同的位置

尝试使用

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

---

您可以切换

边框颜色

：

layerTitleJq.hover( function( evt ) {
      $(this).removeAttr('style');
   },
   function( evt ){ 
      $(this).css( 'border-color', 'transparent' ); // invisible border
})

（）

---

但更好的方法是上课。当类存在时，使边框可见。请参阅。

您可以通过在没有边框时添加填充来解决此问题，如果有边框，则删除填充

layerTitleJq.hover( function( evt ) {
    layerTitleJq.css( 'border', "" ).css( 'padding', "0px" );
}, function( evt ){
    layerTitleJq.css( 'border', 0 ).css( 'padding', "2px" );
})

顺便说一下，你可以用CSS来完成所有这些

.ui-corner-all {
  padding: 2px;
  border: 0;
}

.ui-corner-all:hover {
  padding: 0px;
  border: 2px solid #999;
}

---

您必须在悬停状态下手动为inputbox添加填充，然后在悬停状态下将其删除

.ui-corner-all {
  padding: 2px;
  border: 0;
}

.ui-corner-all:hover {
  padding: 0px;
  border: 2px solid #999;
}