jquery - マウスオーバーイベントでセル間隔の空白を変更するには?

Question

テーブルの作成には、次の属性を使用します。cellSpacing="5"をスペースに使っています。実行すると、表のセル間に空白が表示されます。マウスオーバーイベントのセル間隔の空白を別の色に変更するには? これは可能ですか？

Table Creation:

    <table border="0" id="TabDeclaration"  width="100%" cellpadding="5" cellspacing="3" border="2">
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
            <td>azaz</td>
        </tr>
        <tr>
            <td>cccc</td>
            <td>dddd</td>
        </tr>
        <tr>
            <td>eeee</td>
            <td>ffff</td>
        </tr>      
    </table>

Answer 1

background-color以下を使用して、ホバーを変更できます。

<script>
    $(function() {
        $('td').hover(function() {
           $(this).addClass('hover');
        }, function() {
           $(this).removeClass('hover');        
        });
    });
</script>

<style>
    td {
        background-color: red;        
    }

    td.hover {
        background-color: blue;        
    }
</style>

機能的なJSFiddle。

Answer 2

使用しないでくださいcellspacing。を使用しpaddingます。次に、セルの背景色を変更するだけです。

tdのクラスを指定すると、CSS または jQuery セレクターでそれらをより適切にターゲットにできるようになる場合があります。

Cellspacing はセルの外側にあるため、背景色を変更することはできません。テーブル全体の背景色を変更する必要があります。