3

テーブルの境界線 (インラインの border= 属性ではなく、css を使用して設定できます) を border: 1px solid black; に設定したいと考えています。テーブルにマウスオーバーしたとき。

jQueryでこれを行うにはどうすればよいですか。このページの上部にあるボタン (質問、タグ、ユーザーなど) で起こっていることと同じだと思いますが、テーブルの境界線を変更したいのに、背景色が変化する div であることを除いて。しかし、コンセプトは同じです。

4

4 に答える 4

11

ホバリング効果のために、jQuery は hover() 疑似イベントを提供します。これは、mouseenter/mouseleave よりも優れた動作をします。また、状態 (通常およびホバー) ごとに CSS クラスを作成し、ホバー時にクラスを変更することをお勧めします。

$(document).ready(function() {
    $("#tableid").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

CSS は次のようになります。

table.Hover { border: 1px solid #000; }
于 2009-06-04T06:09:38.470 に答える
2

CSS プロパティを直接編集するのではなく、テーブルのクラスを交換する方が良い場合があります。これは、よりスケーラブルで拡張可能なソリューションになります。

table {
   border:0;
}

table.border {
   border:1px solid #000;
}

もちろん、境界線が追加されるとテーブルは 1px の位置に「ジャンプ」するので、ホバリングしていないときはマージンまたは白い境界線を使用する方がよいでしょう:

table {
   border:1px solid #fff;
}

table.border {
   border:1px solid #000;
}

または、IE6 に準拠する必要がない場合は、純粋な CSS ですべてを行うことができます。

table {
   border:1px solid #fff;
}

table:hover {
   border:1px solid #000;
}

これは、最良の/最も単純な/スケーラブルなアプローチです!

于 2009-06-04T06:09:52.807 に答える
0

あるいは、「ボーダー」ではなく「アウトライン」は、要素のレイアウトで余分なスペースを占有しません。

于 2014-05-17T06:31:53.400 に答える
0

mouseenter および mouseleave イベントに関するこの記事を確認してください。

$("table#mytable").mouseenter(function(){
      $("table#mytable",this).css("border", "solid 1px black");
    }).mouseleave(function(){
      $("table#mytable",this).css("border", "o");
    });
于 2009-06-04T06:02:32.617 に答える