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

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: '' });
});