如何在鼠标悬停事件上更改cellspacing空格?

时间:2012-07-25 05:52:58

标签: jquery html css html-table highlighting

我使用以下属性来创建表。我使用cellSpacing="5"作为空间。当我执行空格时,表格中的单元格之间会显得很好。 如何使用其他颜色更改鼠标悬停事件上的cellspacing空格?这可能吗?

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>

2 个答案:

答案 0 :(得分: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>

Functional JSFiddle

Screenshot

答案 1 :(得分:0)

请勿使用cellspacing。使用padding。然后你可以改变单元格的背景颜色。

提供td类可能会有所帮助,因此您可以使用CSS或jQuery选择器更好地定位它们。

单元格空间位于单元格之外,因此您无法更改背景颜色。你必须改变整个表的背景颜色。