1

入力テキストフィールドは、マウスオーバーするまでプレーンな古いテキストのように見せたいです。

私はこの少しのコードでこれを達成します（ここでjsbinからも入手できます）

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

美的な問題は、ホバーすると、境界線が表示されたときにテキストフィールドのテキストが1〜2ピクセル上にプッシュされることです。ホバー中に そのテキストをまったく同じ場所に保持する方法を考えています。

4

3 に答える 3

2

border-color代わりに切り替えることができます：

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

(デモ)

しかし、より良い方法は、クラスを切り替えることです。クラスが存在する場合、境界線を表示します。これを参照してください。

于 2013-01-26T15:52:41.950 に答える
1

使ってみてください

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
于 2013-01-26T15:47:57.980 に答える
0

境界線がない場合はパディングを追加し、境界線がある場合はパディングを削除することで解決できます。

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;
}
于 2013-01-26T16:19:16.723 に答える