0

私はテーブルを持っています (はい、知っていますが、テーブルを使用するかどうかを制御することはできません)。各セルには div が含まれ、各 div 内にはフォーム要素があります。表の幅は CSS で 100% 幅に設定されています。テーブル セル内のすべての div には、スペースを確保するために 5 ピクセルのマージンがあります。すべてのフォーム要素 (inputs、selects、textareas) も 100% 幅に設定されているため、画面全体が使用されます (私の考えではありません!)。

私がする必要があるのは、テーブル セルの div のホバーで、絶対配置を介してドキュメント フローからテキストエリアを削除し (レイアウトを台無しにすることなくサイズ変更機能を復元するため)、より高い z-index を与えてから、mouseleave を返すことです。それを元の状態に。

私が現時点で持っているものは次のとおりです。

$(document).ready(function() {
$('table tr td div div.textareaHolder').mouseenter(function() {
    $(this).css({
        position : 'absolute',
        zIndex : '100'
        });
});
    $('table tr td div div.textareaHolder').mouseleave(function() {
    $(this).css({
        position : 'static',
        width : '100%',
        height : '100%',
        zIndex : ''
        });
});
});

また、テキストエリアを元のサイズに戻します。

4

2 に答える 2

2

jsの代わりにこのクラスを試すことができます

 .txtholder
    {
     position:static;
     width:100%;
     height:100%;
    }

   .txtholder:hover
     {
      position:absolute;
      z-index:100;
      }
于 2012-11-07T12:44:57.643 に答える
0

質問を正しく理解できたと思います。textareaホバーしたときに「展開」して元の状態に戻りたいですか？

フィドルを作りました、それが役立つことを願っています

編集：

Firefox では、この更新されたフィドルは問題なく動作しますが、Chrome では、サイズを変更すると、マウス カーソルの位置が境界線の周囲でわずかに変化し、ホバー状態が複数回発生するため、テキスト領域が発作を起こします。

ユーザーのサイズ変更を完全に無効にするtextarea { resize: none; }か、Chrome のみをターゲットにすることができます

@media screen and (-webkit-min-device-pixel-ratio:0) {
   textarea { resize: none; }
}

(またはModernizr経由で) Firefox のサイズ変更をオンのままにします。

于 2012-11-07T12:53:10.107 に答える