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

Question

我希望我的输入文本字段在鼠标悬停之前看起来像普通的旧文本。

我用这段代码完成了这个（也可以在jsbin上找到）

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

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

Answer 1

border-color您可以改为切换：

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

（演示）

但更好的方法是切换一个类。当类存在时，使边框可见。看到这个。

Answer 2

尝试使用

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

Answer 3

您可以通过在没有边框时添加填充来解决这个问题，当有边框时，删除填充。

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;
}