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 tds are still seashell/white.

To fix your problem, apply background color to trs in your CSS and not to your tds:

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;

}