尝试使用JQuery突出显示表行但不起作用，有人可以告诉我为什么以及如何解决它吗？

Question

Trying to hightlight table row using JQuery but not working, can anyone tell me why and how to fix it?

table:

<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", "");
    });

What happens is the table row does not get highlighted when hovering over it, please also note that it works for a td when i adjust the selector, just wont work for tr row.

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

I'll add to sbeliv01's correct answer that there is no need for Javascript, it is realizable with pure CSS, and I would strongly advise you to use it for this sort of thing:

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

EDIT after OP post full CSS code : Yes, your CSS is "blocking" the hover effect, because you are applying background-color on your td elements. So your tr background color is correctly changed yellow , but you can't see it as your td s are still seashell / white .

To fix your problem, apply background color to tr s in your CSS and not to your 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;

}

Answer 2

If that is the exact code that you're using, you have an extra }); at the end of the jQuery that would throw an error. Swap it out with the code below and it should work fine.

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

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

Answer 3

You can try this one

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