嘗試使用JQuery突出顯示表行但不起作用，有人可以告訴我為什么以及如何解決它嗎？

Question

嘗試使用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>

JQuery的：

    $("#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;

    }

Answer 1

我將添加到sbeliv01的正確答案中，即不需要Javascript，它可以通過純CSS實現，並且我強烈建議您將其用於此類事情：

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

在OP之后編輯完整的CSS代碼后進行編輯 ：是的，您的CSS正在“阻止”懸停效果，因為您正在將td元素應用background-color 。 因此，您的tr背景顏色正確更改為yellow ，但由於td仍為seashell / white因此看不到它。

要解決您的問題，請將背景顏色應用於CSS中的tr而不是td ：

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;

}

Answer 2

如果您使用的是正確的代碼，則可以使用}); 在jQuery的末尾會引發錯誤。 用下面的代碼替換掉它，它應該可以正常工作。

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

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

Answer 3

你可以試試這個

$('#customers tbody tr').mouseenter(function(){
    $(this).css({ background: 'yellow' });
}).mouseleave(function(){
    $(this).css({ background: '' });
});