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

（demo）

但更好的方法是toggle一个班级。当班级存在时，使边框可见。请参阅this。

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

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

3 个答案: