0

尝试使用 JQuery 突出显示表行但不工作，谁能告诉我为什么以及如何解决它？

桌子：

<table id="customers">
    <caption>Customers</caption>
    <thead>
        <tr>
            <th>Customer no</th>
            <th>Last name</th>
            <th>First name</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr class="alt">
            <td>1</td>
            <td>Jackson</td>
            <td>Simon</td>
            <td>
                <div class="align-left">
                    <input type="submit" name="View" id="view" value="View" />
                </div>
                <div class="align-right">
                    <input type="submit" name="Rent" id="rent" value="Wants to rent" />
                </div>
            </td>
        </tr>
        <tr class="alt">
            <td>1</td>
            <td>Miller</td>
            <td>Darren</td>
            <td>
                <div class="align-left">
                    <input type="submit" name="View" id="view" value="View" />
                </div>
                <div class="align-right">
                    <input type="submit" name="Rent" id="rent" value="Wants to rent" />
                </div>
            </td>
        </tr>
    </tbody>
</table>

查询：

    $("#customers tbody tr").hover(

    function () {
        $(this).css({
            background: 'yellow'
        });
    },

    function () {
        $(this).css("background", "");
    });

发生的情况是当将鼠标悬停在表格行上时不会突出显示，另请注意，当我调整选择器时它适用于 td，但不适用于 tr 行。

CSS：

    ...
    /* table data style */

    table {

        border-collapse: collapse;    
        width: 400px;
        color: grey;
        font-family: sans-serif;

    }

    th, td {

        border-bottom: 1px solid brown;
        padding: 5px;
        background-color: seashell;
        text-align: left;    

    }

    th {

        width: 200px;

    }

    td {

        width: 200px;

    }

    tr.alt td, tr.alt th {

        background-color: white;

    }

    tr:last-child td, tr:last-child th {

        border-bottom: 0;

    }

    caption {

        font-weight: bold;
        padding-bottom: 5px;

    }

    .main-font {

        font-family: sans-serif;

    }
4

3 回答 3

3

我将在 sbeliv01 的正确答案中添加不需要 Javascript，它可以通过纯 CSS 实现，我强烈建议您将其用于此类事情：

#customers tbody tr:hover
{
  background: yellow;
}

在 OP 发布完整的 CSS 代码后编辑：是的，您的 CSS 正在“阻止”悬停效果，因为您正在应用background-color您的td元素。因此，您的tr背景颜色已正确更改yellow，但您看不到它，因为您td的 s 仍然是seashell/ white。

要解决您的问题，请将背景颜色应用于tr您的 CSS 中的 s 而不是您td的 s：

table {

    border-collapse: collapse;
    width: 400px;
    color: grey;
    font-family: sans-serif;

}

th, td {
    /* Remove background-color here */
    border-bottom: 1px solid brown;
    padding: 5px;
    text-align: left;

}

/* Add this declaration (with the color previously applied to "th, td") */
tr
{
    background-color: seashell;
}

th {

    width: 200px;

}

td {

    width: 200px;

}

/* Change your selector from "tr.alt td, tr.alt th" to this */
tr.alt {

    background-color: white;

}

tr:last-child td, tr:last-child th {

    border-bottom: 0;

}

caption {

    font-weight: bold;
    padding-bottom: 5px;

}

.main-font {

    font-family: sans-serif;

}
于 2013-02-06T21:46:08.820 回答
1

如果那是您正在使用的确切代码，那么});在 jQuery 末尾会有一个额外的代码，它会引发错误。用下面的代码替换它，它应该可以正常工作。

$("#customers tbody tr").hover(
    function ()
    {
        $(this).css({background: 'yellow'});
    },

    function ()
    {
        $(this).css("background", "");
    }
);
于 2013-02-06T21:42:23.377 回答
0

你可以试试这个 

$('#customers tbody tr').mouseenter(function(){
    $(this).css({ background: 'yellow' });
}).mouseleave(function(){
    $(this).css({ background: '' });
});
于 2013-02-06T21:49:12.270 回答