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

keep fixed position of text input when hide/show border

本文关键字：输入 定位 位置 文本 显示 边框 隐藏      更新时间：2023-09-26

我希望我的输入文本字段看起来像纯旧文本，直到它们被鼠标悬停在上面。

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

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

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

您可以

改为切换border-color：

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

（演示）

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

尝试使用

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
您可以通过在没有

边框时添加填充来解决此问题，当有边框时，删除填充。

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;
}
相关文章：